vuetify 3.2.4 → 3.3.0

package/lib/labs/VBottomSheet/VBottomSheet.mjs

@@ -0,0 +1,40 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
+// Styles
+import "./VBottomSheet.css";
+
+// Components
+import { makeVDialogProps, VDialog } from "../../components/VDialog/VDialog.mjs"; // Composables
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export const makeVBottomSheetProps = propsFactory({
+  inset: Boolean,
+  ...makeVDialogProps({
+    contentClass: 'v-bottom-sheet__content',
+    transition: 'bottom-sheet-transition'
+  })
+}, 'v-bottom-sheet');
+export const VBottomSheet = genericComponent()({
+  name: 'VBottomSheet',
+  props: makeVBottomSheetProps(),
+  emits: {
+    'update:modelValue': value => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const isActive = useProxiedModel(props, 'modelValue');
+    useRender(() => {
+      const [dialogProps] = VDialog.filterProps(props);
+      return _createVNode(VDialog, _mergeProps(dialogProps, {
+        "modelValue": isActive.value,
+        "onUpdate:modelValue": $event => isActive.value = $event,
+        "class": ['v-bottom-sheet', {
+          'v-bottom-sheet--inset': props.inset
+        }]
+      }), slots);
+    });
+    return {};
+  }
+});
+//# sourceMappingURL=VBottomSheet.mjs.map

package/lib/labs/VBottomSheet/VBottomSheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VBottomSheet.mjs","names":["makeVDialogProps","VDialog","useProxiedModel","genericComponent","propsFactory","useRender","makeVBottomSheetProps","inset","Boolean","contentClass","transition","VBottomSheet","name","props","emits","value","setup","_ref","slots","isActive","dialogProps","filterProps","_createVNode","_mergeProps","$event"],"sources":["../../../src/labs/VBottomSheet/VBottomSheet.tsx"],"sourcesContent":["// Styles\nimport './VBottomSheet.sass'\n\n// Components\nimport { makeVDialogProps, VDialog } from '@/components/VDialog/VDialog'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\n\nexport const makeVBottomSheetProps = propsFactory({\n  inset: Boolean,\n\n  ...makeVDialogProps({\n    contentClass: 'v-bottom-sheet__content',\n    transition: 'bottom-sheet-transition',\n  }),\n}, 'v-bottom-sheet')\n\nexport const VBottomSheet = genericComponent<OverlaySlots>()({\n  name: 'VBottomSheet',\n\n  props: makeVBottomSheetProps(),\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n\n    useRender(() => {\n      const [dialogProps] = VDialog.filterProps(props)\n\n      return (\n        <VDialog\n          { ...dialogProps }\n          v-model={ isActive.value }\n          class={[\n            'v-bottom-sheet',\n            {\n              'v-bottom-sheet--inset': props.inset,\n            },\n          ]}\n          v-slots={ slots }\n        />\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBottomSheet = InstanceType<typeof VBottomSheet>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,gBAAgB,EAAEC,OAAO,gDAElC;AAAA,SACSC,eAAe,8CAExB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAGA,OAAO,MAAMC,qBAAqB,GAAGF,YAAY,CAAC;EAChDG,KAAK,EAAEC,OAAO;EAEd,GAAGR,gBAAgB,CAAC;IAClBS,YAAY,EAAE,yBAAyB;IACvCC,UAAU,EAAE;EACd,CAAC;AACH,CAAC,EAAE,gBAAgB,CAAC;AAEpB,OAAO,MAAMC,YAAY,GAAGR,gBAAgB,EAAgB,CAAC;EAC3DS,IAAI,EAAE,cAAc;EAEpBC,KAAK,EAAEP,qBAAqB,EAAE;EAE9BQ,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAc,IAAK;EAC3C,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAME,QAAQ,GAAGjB,eAAe,CAACW,KAAK,EAAE,YAAY,CAAC;IAErDR,SAAS,CAAC,MAAM;MACd,MAAM,CAACe,WAAW,CAAC,GAAGnB,OAAO,CAACoB,WAAW,CAACR,KAAK,CAAC;MAEhD,OAAAS,YAAA,CAAArB,OAAA,EAAAsB,WAAA,CAESH,WAAW;QAAA,cACND,QAAQ,CAACJ,KAAK;QAAA,uBAAAS,MAAA,IAAdL,QAAQ,CAACJ,KAAK,GAAAS,MAAA;QAAA,SACjB,CACL,gBAAgB,EAChB;UACE,uBAAuB,EAAEX,KAAK,CAACN;QACjC,CAAC;MACF,IACSW,KAAK;IAGrB,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/labs/VBottomSheet/VBottomSheet.sass

@@ -0,0 +1,37 @@
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+// Transition
+.bottom-sheet-transition
+  &-enter-from
+    transform: translateY(100%)
+
+  &-leave-to
+    transform: translateY(100%)
+
+// Block
+.v-bottom-sheet
+  > .v-bottom-sheet__content.v-overlay__content
+    align-self: flex-end
+    border-radius: 0
+    flex: 0 1 auto
+    left: 0
+    right: 0
+    margin-inline-start: 0
+    margin-inline-end: 0
+    margin-bottom: 0
+    transition-duration: $bottom-sheet-transition-duration
+    width: 100%
+    max-width: 100%
+    overflow: visible
+
+    > .v-card,
+    > .v-sheet
+      border-radius: $bottom-sheet-border-radius
+
+  &.v-bottom-sheet--inset
+    max-width: none
+
+    @media #{map-get(settings.$display-breakpoints, 'sm-and-up')}
+      max-width: $bottom-sheet-inset-width

package/lib/labs/VBottomSheet/_variables.scss

@@ -0,0 +1,5 @@
+@use '../../styles/settings';
+
+$bottom-sheet-inset-width: 70% !default;
+$bottom-sheet-border-radius: 0 !default;
+$bottom-sheet-transition-duration: .2s !default;