@vuetify/nightly 3.0.0-beta.10 → 3.0.0-beta.13

package/lib/components/VCounter/index.d.ts

@@ -0,0 +1,223 @@
+import * as vue from 'vue';
+
+declare const VCounter: vue.DefineComponent<{
+    transition: Omit<{
+        type: vue.PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        })>;
+        default: string;
+        validator: (val: unknown) => boolean;
+    }, "type" | "default"> & {
+        type: vue.PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        }) | {
+            component: vue.DefineComponent<{
+                group: BooleanConstructor;
+                hideOnLeave: BooleanConstructor;
+                leaveAbsolute: BooleanConstructor;
+                mode: {
+                    type: StringConstructor;
+                    default: string | undefined;
+                };
+                origin: {
+                    type: StringConstructor;
+                    default: string;
+                };
+            }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+                group: BooleanConstructor;
+                hideOnLeave: BooleanConstructor;
+                leaveAbsolute: BooleanConstructor;
+                mode: {
+                    type: StringConstructor;
+                    default: string | undefined;
+                };
+                origin: {
+                    type: StringConstructor;
+                    default: string;
+                };
+            }>>, {
+                origin: string;
+                group: boolean;
+                mode: string;
+                hideOnLeave: boolean;
+                leaveAbsolute: boolean;
+            }>;
+        }>;
+        default: string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        }) | {
+            component: vue.DefineComponent<{
+                group: BooleanConstructor;
+                hideOnLeave: BooleanConstructor;
+                leaveAbsolute: BooleanConstructor;
+                mode: {
+                    type: StringConstructor;
+                    default: string | undefined;
+                };
+                origin: {
+                    type: StringConstructor;
+                    default: string;
+                };
+            }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+                group: BooleanConstructor;
+                hideOnLeave: BooleanConstructor;
+                leaveAbsolute: BooleanConstructor;
+                mode: {
+                    type: StringConstructor;
+                    default: string | undefined;
+                };
+                origin: {
+                    type: StringConstructor;
+                    default: string;
+                };
+            }>>, {
+                origin: string;
+                group: boolean;
+                mode: string;
+                hideOnLeave: boolean;
+                leaveAbsolute: boolean;
+            }>;
+        };
+    };
+    active: BooleanConstructor;
+    max: (StringConstructor | NumberConstructor)[];
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    transition: Omit<{
+        type: vue.PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        })>;
+        default: string;
+        validator: (val: unknown) => boolean;
+    }, "type" | "default"> & {
+        type: vue.PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        }) | {
+            component: vue.DefineComponent<{
+                group: BooleanConstructor;
+                hideOnLeave: BooleanConstructor;
+                leaveAbsolute: BooleanConstructor;
+                mode: {
+                    type: StringConstructor;
+                    default: string | undefined;
+                };
+                origin: {
+                    type: StringConstructor;
+                    default: string;
+                };
+            }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+                group: BooleanConstructor;
+                hideOnLeave: BooleanConstructor;
+                leaveAbsolute: BooleanConstructor;
+                mode: {
+                    type: StringConstructor;
+                    default: string | undefined;
+                };
+                origin: {
+                    type: StringConstructor;
+                    default: string;
+                };
+            }>>, {
+                origin: string;
+                group: boolean;
+                mode: string;
+                hideOnLeave: boolean;
+                leaveAbsolute: boolean;
+            }>;
+        }>;
+        default: string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        }) | {
+            component: vue.DefineComponent<{
+                group: BooleanConstructor;
+                hideOnLeave: BooleanConstructor;
+                leaveAbsolute: BooleanConstructor;
+                mode: {
+                    type: StringConstructor;
+                    default: string | undefined;
+                };
+                origin: {
+                    type: StringConstructor;
+                    default: string;
+                };
+            }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+                group: BooleanConstructor;
+                hideOnLeave: BooleanConstructor;
+                leaveAbsolute: BooleanConstructor;
+                mode: {
+                    type: StringConstructor;
+                    default: string | undefined;
+                };
+                origin: {
+                    type: StringConstructor;
+                    default: string;
+                };
+            }>>, {
+                origin: string;
+                group: boolean;
+                mode: string;
+                hideOnLeave: boolean;
+                leaveAbsolute: boolean;
+            }>;
+        };
+    };
+    active: BooleanConstructor;
+    max: (StringConstructor | NumberConstructor)[];
+    value: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>>, {
+    active: boolean;
+    transition: string | boolean | (vue.TransitionProps & {
+        component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+    }) | {
+        component: vue.DefineComponent<{
+            group: BooleanConstructor;
+            hideOnLeave: BooleanConstructor;
+            leaveAbsolute: BooleanConstructor;
+            mode: {
+                type: StringConstructor;
+                default: string | undefined;
+            };
+            origin: {
+                type: StringConstructor;
+                default: string;
+            };
+        }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+            group: BooleanConstructor;
+            hideOnLeave: BooleanConstructor;
+            leaveAbsolute: BooleanConstructor;
+            mode: {
+                type: StringConstructor;
+                default: string | undefined;
+            };
+            origin: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>>, {
+            origin: string;
+            group: boolean;
+            mode: string;
+            hideOnLeave: boolean;
+            leaveAbsolute: boolean;
+        }>;
+    };
+    value: string | number;
+}>;
+
+export { VCounter };

package/lib/components/VDefaultsProvider/index.d.ts

@@ -0,0 +1,26 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+interface DefaultsInstance {
+    [key: string]: undefined | Record<string, unknown>;
+    global?: Record<string, unknown>;
+}
+
+declare const VDefaultsProvider: vue.DefineComponent<{
+    defaults: PropType<Partial<DefaultsInstance>>;
+    reset: (StringConstructor | NumberConstructor)[];
+    root: BooleanConstructor;
+    scoped: BooleanConstructor;
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    defaults: PropType<Partial<DefaultsInstance>>;
+    reset: (StringConstructor | NumberConstructor)[];
+    root: BooleanConstructor;
+    scoped: BooleanConstructor;
+}>>, {
+    root: boolean;
+    scoped: boolean;
+}>;
+
+export { VDefaultsProvider };

package/lib/components/VDialog/VDialog.css

@@ -5,6 +5,8 @@
 }
 .v-dialog .v-overlay__content {
   max-height: calc(100% - 48px);
+  width: calc(100% - 48px);
+  max-width: calc(100% - 48px);
   margin: 24px;
   display: flex;
   flex-direction: column;

package/lib/components/VDialog/VDialog.mjs

@@ -1,11 +1,11 @@
-import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 // Styles
 import "./VDialog.css"; // Components
 
 import { VDialogTransition } from "../transitions/index.mjs";
+import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
 import { VOverlay } from "../VOverlay/index.mjs"; // Composables
 
-import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 import { makeTransitionProps } from "../../composables/transition.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { useScopeId } from "../../composables/scopeId.mjs";
@@ -29,9 +29,6 @@ export const VDialog = genericComponent()({
     },
     scrollable: Boolean,
     modelValue: Boolean,
-    ...makeDimensionProps({
-      width: 'auto'
-    }),
     ...makeTransitionProps({
       transition: {
         component: VDialogTransition
@@ -48,9 +45,6 @@ export const VDialog = genericComponent()({
       slots
     } = _ref;
     const isActive = useProxiedModel(props, 'modelValue');
-    const {
-      dimensionStyles
-    } = useDimension(props);
     const {
       scopeId
     } = useScopeId();
@@ -66,7 +60,7 @@ export const VDialog = genericComponent()({
       (_overlay$value2 = overlay.value) != null && _overlay$value2.globalTop && // It isn't the document or the dialog body
       ![document, overlay.value.contentEl].includes(after) && // It isn't inside the dialog body
       !overlay.value.contentEl.contains(after)) {
-        const focusable = [...overlay.value.contentEl.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled'));
+        const focusable = [...overlay.value.contentEl.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])')].filter(el => !el.hasAttribute('disabled') && !el.matches('[tabindex="-1"]'));
         if (!focusable.length) return;
         const firstElement = focusable[0];
         const lastElement = focusable[focusable.length - 1];
@@ -111,7 +105,6 @@ export const VDialog = genericComponent()({
         'v-dialog--fullscreen': props.fullscreen,
         'v-dialog--scrollable': props.scrollable
       }],
-      "style": dimensionStyles.value,
       "transition": props.transition,
       "scrollStrategy": "block",
       "ref": overlay,
@@ -123,8 +116,20 @@ export const VDialog = genericComponent()({
       },
       "z-index": 2400
     }, scopeId, attrs), {
-      default: slots.default,
-      activator: slots.activator
+      activator: slots.activator,
+      default: function () {
+        var _slots$default;
+
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        return _createVNode(VDefaultsProvider, {
+          "root": true
+        }, {
+          default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots, ...args)]
+        });
+      }
     }));
     return forwardRefs({}, overlay);
   }

package/lib/components/VDialog/VDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VDialog.mjs","names":["VDialogTransition","VOverlay","makeDimensionProps","useDimension","makeTransitionProps","useProxiedModel","useScopeId","forwardRefs","nextTick","ref","watch","genericComponent","IN_BROWSER","useRender","VDialog","name","inheritAttrs","props","fullscreen","Boolean","origin","type","String","default","retainFocus","scrollable","modelValue","width","transition","component","emits","value","setup","attrs","slots","isActive","dimensionStyles","scopeId","overlay","onFocusin","e","before","relatedTarget","after","target","contentEl","globalTop","document","includes","contains","focusable","querySelectorAll","filter","el","hasAttribute","length","firstElement","lastElement","focus","val","addEventListener","removeEventListener","immediate","preventScroll","activatorEl","activator"],"sources":["../../../src/components/VDialog/VDialog.tsx"],"sourcesContent":["// Styles\nimport './VDialog.sass'\n\n// Components\nimport { VDialogTransition } from '@/components/transitions'\nimport { VOverlay } from '@/components/VOverlay'\n\n// Composables\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeTransitionProps } from '@/composables/transition'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\nimport { forwardRefs } from '@/composables/forwardRefs'\n\n// Utilities\nimport { nextTick, ref, watch } from 'vue'\nimport { genericComponent, IN_BROWSER, useRender } from '@/util'\n\n// Types\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\n\nexport const VDialog = genericComponent<new () => {\n  $slots: OverlaySlots\n}>()({\n  name: 'VDialog',\n\n  inheritAttrs: false,\n\n  props: {\n    fullscreen: Boolean,\n    origin: {\n      type: String,\n      default: 'center center',\n    },\n    retainFocus: {\n      type: Boolean,\n      default: true,\n    },\n    scrollable: Boolean,\n    modelValue: Boolean,\n\n    ...makeDimensionProps({ width: 'auto' }),\n    ...makeTransitionProps({\n      transition: { component: VDialogTransition },\n    }),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { dimensionStyles } = useDimension(props)\n    const { scopeId } = useScopeId()\n\n    const overlay = ref<VOverlay>()\n    function onFocusin (e: FocusEvent) {\n      const before = e.relatedTarget as HTMLElement | null\n      const after = e.target as HTMLElement | null\n\n      if (\n        before !== after &&\n        overlay.value?.contentEl &&\n        // We're the topmost dialog\n        overlay.value?.globalTop &&\n        // It isn't the document or the dialog body\n        ![document, overlay.value.contentEl].includes(after!) &&\n        // It isn't inside the dialog body\n        !overlay.value.contentEl.contains(after)\n      ) {\n        const focusable = [...overlay.value.contentEl.querySelectorAll(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        )].filter(el => !el.hasAttribute('disabled')) as HTMLElement[]\n\n        if (!focusable.length) return\n\n        const firstElement = focusable[0]\n        const lastElement = focusable[focusable.length - 1]\n\n        if (before === firstElement) {\n          lastElement.focus()\n        } else {\n          firstElement.focus()\n        }\n      }\n    }\n\n    if (IN_BROWSER) {\n      watch(() => isActive.value && props.retainFocus, val => {\n        val\n          ? document.addEventListener('focusin', onFocusin)\n          : document.removeEventListener('focusin', onFocusin)\n      }, { immediate: true })\n    }\n\n    watch(isActive, async val => {\n      await nextTick()\n      if (val) {\n        overlay.value!.contentEl?.focus({ preventScroll: true })\n      } else {\n        overlay.value!.activatorEl?.focus({ preventScroll: true })\n      }\n    })\n\n    useRender(() => (\n      <VOverlay\n        v-model={ isActive.value }\n        class={[\n          'v-dialog',\n          {\n            'v-dialog--fullscreen': props.fullscreen,\n            'v-dialog--scrollable': props.scrollable,\n          },\n        ]}\n        style={ dimensionStyles.value }\n        transition={ props.transition }\n        scrollStrategy=\"block\"\n        ref={ overlay }\n        aria-role=\"dialog\"\n        aria-modal=\"true\"\n        activatorProps={{\n          'aria-haspopup': 'dialog',\n          'aria-expanded': String(isActive.value),\n        }}\n        z-index={ 2400 }\n        { ...scopeId }\n        { ...attrs }\n        v-slots={{\n          default: slots.default,\n          activator: slots.activator,\n        }}\n      />\n    ))\n\n    return forwardRefs({}, overlay)\n  },\n})\n\nexport type VDialog = InstanceType<typeof VDialog>\n"],"mappings":"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"}
+{"version":3,"file":"VDialog.mjs","names":["VDialogTransition","VDefaultsProvider","VOverlay","makeTransitionProps","useProxiedModel","useScopeId","forwardRefs","nextTick","ref","watch","genericComponent","IN_BROWSER","useRender","VDialog","name","inheritAttrs","props","fullscreen","Boolean","origin","type","String","default","retainFocus","scrollable","modelValue","transition","component","emits","value","setup","attrs","slots","isActive","scopeId","overlay","onFocusin","e","before","relatedTarget","after","target","contentEl","globalTop","document","includes","contains","focusable","querySelectorAll","filter","el","hasAttribute","matches","length","firstElement","lastElement","focus","val","addEventListener","removeEventListener","immediate","preventScroll","activatorEl","activator","args"],"sources":["../../../src/components/VDialog/VDialog.tsx"],"sourcesContent":["// Styles\nimport './VDialog.sass'\n\n// Components\nimport { VDialogTransition } from '@/components/transitions'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VOverlay } from '@/components/VOverlay'\n\n// Composables\nimport { makeTransitionProps } from '@/composables/transition'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\nimport { forwardRefs } from '@/composables/forwardRefs'\n\n// Utilities\nimport { nextTick, ref, watch } from 'vue'\nimport { genericComponent, IN_BROWSER, useRender } from '@/util'\n\n// Types\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\n\nexport const VDialog = genericComponent<new () => {\n  $slots: OverlaySlots\n  $props: VOverlay['$props']\n}>()({\n  name: 'VDialog',\n\n  inheritAttrs: false,\n\n  props: {\n    fullscreen: Boolean,\n    origin: {\n      type: String,\n      default: 'center center',\n    },\n    retainFocus: {\n      type: Boolean,\n      default: true,\n    },\n    scrollable: Boolean,\n    modelValue: Boolean,\n\n    ...makeTransitionProps({\n      transition: { component: VDialogTransition },\n    }),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { scopeId } = useScopeId()\n\n    const overlay = ref<VOverlay>()\n    function onFocusin (e: FocusEvent) {\n      const before = e.relatedTarget as HTMLElement | null\n      const after = e.target as HTMLElement | null\n\n      if (\n        before !== after &&\n        overlay.value?.contentEl &&\n        // We're the topmost dialog\n        overlay.value?.globalTop &&\n        // It isn't the document or the dialog body\n        ![document, overlay.value.contentEl].includes(after!) &&\n        // It isn't inside the dialog body\n        !overlay.value.contentEl.contains(after)\n      ) {\n        const focusable = [...overlay.value.contentEl.querySelectorAll(\n          'button, [href], input:not([type=\"hidden\"]), select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        )].filter(el => !el.hasAttribute('disabled') && !el.matches('[tabindex=\"-1\"]')) as HTMLElement[]\n\n        if (!focusable.length) return\n\n        const firstElement = focusable[0]\n        const lastElement = focusable[focusable.length - 1]\n\n        if (before === firstElement) {\n          lastElement.focus()\n        } else {\n          firstElement.focus()\n        }\n      }\n    }\n\n    if (IN_BROWSER) {\n      watch(() => isActive.value && props.retainFocus, val => {\n        val\n          ? document.addEventListener('focusin', onFocusin)\n          : document.removeEventListener('focusin', onFocusin)\n      }, { immediate: true })\n    }\n\n    watch(isActive, async val => {\n      await nextTick()\n      if (val) {\n        overlay.value!.contentEl?.focus({ preventScroll: true })\n      } else {\n        overlay.value!.activatorEl?.focus({ preventScroll: true })\n      }\n    })\n\n    useRender(() => (\n      <VOverlay\n        v-model={ isActive.value }\n        class={[\n          'v-dialog',\n          {\n            'v-dialog--fullscreen': props.fullscreen,\n            'v-dialog--scrollable': props.scrollable,\n          },\n        ]}\n        transition={ props.transition }\n        scrollStrategy=\"block\"\n        ref={ overlay }\n        aria-role=\"dialog\"\n        aria-modal=\"true\"\n        activatorProps={{\n          'aria-haspopup': 'dialog',\n          'aria-expanded': String(isActive.value),\n        }}\n        z-index={ 2400 }\n        { ...scopeId }\n        { ...attrs }\n      >\n        {{\n          activator: slots.activator,\n          default: (...args) => (\n            <VDefaultsProvider root>\n              { slots.default?.(...args) }\n            </VDefaultsProvider>\n          ),\n        }}\n      </VOverlay>\n    ))\n\n    return forwardRefs({}, overlay)\n  },\n})\n\nexport type VDialog = InstanceType<typeof VDialog>\n"],"mappings":"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"}

package/lib/components/VDialog/VDialog.sass

@@ -9,6 +9,8 @@
 
   .v-overlay__content
     max-height: calc(100% - #{$dialog-margin * 2})
+    width: calc(100% - #{$dialog-margin * 2})
+    max-width: calc(100% - #{$dialog-margin * 2})
     margin: $dialog-margin
     display: flex
     flex-direction: column