@vuetify/nightly 3.0.0-alpha.3 → 3.0.0-beta.2

package/lib/components/VAppBar/VAppBar.mjs

@@ -1,245 +1,81 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
 // Styles
-import "./VAppBar.sass"; // Extensions
-
-import VToolbar from "../VToolbar/VToolbar.mjs"; // Directives
-
-import Scroll from "../../directives/scroll/index.mjs"; // Mixins
+import "./VAppBar.css"; // Components
 
-import Applicationable from "../../mixins/applicationable/index.mjs";
-import Scrollable from "../../mixins/scrollable.mjs";
-import SSRBootable from "../../mixins/ssr-bootable.mjs";
-import Toggleable from "../../mixins/toggleable/index.mjs"; // Utilities
+import { filterToolbarProps, makeVToolbarProps, VToolbar } from "../VToolbar/VToolbar.mjs"; // Composables
 
-import { convertToUnit } from "../../util/helpers.mjs";
-import mixins from "../../util/mixins.mjs"; // Types
+import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
 
-const baseMixins = mixins(VToolbar, Scrollable, SSRBootable, Toggleable, Applicationable('top', ['clippedLeft', 'clippedRight', 'computedHeight', 'invertedScroll', 'isExtended', 'isProminent', 'value']));
-/* @vue/component */
-
-export default baseMixins.extend({
-  name: 'v-app-bar',
-  directives: {
-    Scroll
-  },
-
-  provide() {
-    return {
-      VAppBar: this
-    };
-  },
+import { computed, ref, toRef } from 'vue';
+import { defineComponent } from "../../util/index.mjs"; // Types
 
+export const VAppBar = defineComponent({
+  name: 'VAppBar',
   props: {
-    clippedLeft: Boolean,
-    clippedRight: Boolean,
-    collapseOnScroll: Boolean,
-    elevateOnScroll: Boolean,
-    fadeImgOnScroll: Boolean,
-    hideOnScroll: Boolean,
-    invertedScroll: Boolean,
-    scrollOffScreen: Boolean,
-    shrinkOnScroll: Boolean,
-    value: {
+    // TODO: Implement scrolling techniques
+    // hideOnScroll: Boolean
+    // invertedScroll: Boolean
+    // collapseOnScroll: Boolean
+    // elevateOnScroll: Boolean
+    // shrinkOnScroll: Boolean
+    // fadeImageOnScroll: Boolean
+    modelValue: {
       type: Boolean,
       default: true
-    }
-  },
-
-  data() {
-    return {
-      isActive: this.value
-    };
-  },
-
-  computed: {
-    applicationProperty() {
-      return !this.bottom ? 'top' : 'bottom';
-    },
-
-    canScroll() {
-      return Scrollable.options.computed.canScroll.call(this) && (this.invertedScroll || this.elevateOnScroll || this.hideOnScroll || this.collapseOnScroll || this.isBooted || // If falsy, user has provided an
-      // explicit value which should
-      // overwrite anything we do
-      !this.value);
-    },
-
-    classes() {
-      return { ...VToolbar.options.computed.classes.call(this),
-        'v-toolbar--collapse': this.collapse || this.collapseOnScroll,
-        'v-app-bar': true,
-        'v-app-bar--clipped': this.clippedLeft || this.clippedRight,
-        'v-app-bar--fade-img-on-scroll': this.fadeImgOnScroll,
-        'v-app-bar--elevate-on-scroll': this.elevateOnScroll,
-        'v-app-bar--fixed': !this.absolute && (this.app || this.fixed),
-        'v-app-bar--hide-shadow': this.hideShadow,
-        'v-app-bar--is-scrolled': this.currentScroll > 0,
-        'v-app-bar--shrink-on-scroll': this.shrinkOnScroll
-      };
     },
-
-    scrollRatio() {
-      const threshold = this.computedScrollThreshold;
-      return Math.max((threshold - this.currentScroll) / threshold, 0);
-    },
-
-    computedContentHeight() {
-      if (!this.shrinkOnScroll) return VToolbar.options.computed.computedContentHeight.call(this);
-      const min = this.dense ? 48 : 56;
-      const max = this.computedOriginalHeight;
-      return min + (max - min) * this.scrollRatio;
-    },
-
-    computedFontSize() {
-      if (!this.isProminent) return undefined;
-      const min = 1.25;
-      const max = 1.5;
-      return min + (max - min) * this.scrollRatio;
-    },
-
-    computedLeft() {
-      if (!this.app || this.clippedLeft) return 0;
-      return this.$vuetify.application.left;
-    },
-
-    computedMarginTop() {
-      if (!this.app) return 0;
-      return this.$vuetify.application.bar;
-    },
-
-    computedOpacity() {
-      if (!this.fadeImgOnScroll) return undefined;
-      return this.scrollRatio;
-    },
-
-    computedOriginalHeight() {
-      let height = VToolbar.options.computed.computedContentHeight.call(this);
-      if (this.isExtended) height += parseInt(this.extensionHeight);
-      return height;
-    },
-
-    computedRight() {
-      if (!this.app || this.clippedRight) return 0;
-      return this.$vuetify.application.right;
-    },
-
-    computedScrollThreshold() {
-      if (this.scrollThreshold) return Number(this.scrollThreshold);
-      return this.computedOriginalHeight - (this.dense ? 48 : 56);
+    position: {
+      type: String,
+      default: 'top',
+      validator: value => ['top', 'bottom'].includes(value)
     },
-
-    computedTransform() {
-      if (!this.canScroll || this.elevateOnScroll && this.currentScroll === 0 && this.isActive) return 0;
-      if (this.isActive) return 0;
-      const scrollOffScreen = this.scrollOffScreen ? this.computedHeight : this.computedContentHeight;
-      return this.bottom ? scrollOffScreen : -scrollOffScreen;
-    },
-
-    hideShadow() {
-      if (this.elevateOnScroll && this.isExtended) {
-        return this.currentScroll < this.computedScrollThreshold;
-      }
-
-      if (this.elevateOnScroll) {
-        return this.currentScroll === 0 || this.computedTransform < 0;
-      }
-
-      return (!this.isExtended || this.scrollOffScreen) && this.computedTransform !== 0;
-    },
-
-    isCollapsed() {
-      if (!this.collapseOnScroll) {
-        return VToolbar.options.computed.isCollapsed.call(this);
-      }
-
-      return this.currentScroll > 0;
-    },
-
-    isProminent() {
-      return VToolbar.options.computed.isProminent.call(this) || this.shrinkOnScroll;
-    },
-
-    styles() {
-      return { ...VToolbar.options.computed.styles.call(this),
-        fontSize: convertToUnit(this.computedFontSize, 'rem'),
-        marginTop: convertToUnit(this.computedMarginTop),
-        transform: "translateY(".concat(convertToUnit(this.computedTransform), ")"),
-        left: convertToUnit(this.computedLeft),
-        right: convertToUnit(this.computedRight)
-      };
-    }
-
-  },
-  watch: {
-    canScroll: 'onScroll',
-
-    computedTransform() {
-      // Normally we do not want the v-app-bar
-      // to update the application top value
-      // to avoid screen jump. However, in
-      // this situation, we must so that
-      // the clipped drawer can update
-      // its top value when scrolled
-      if (!this.canScroll || !this.clippedLeft && !this.clippedRight) return;
-      this.callUpdate();
-    },
-
-    invertedScroll(val) {
-      this.isActive = !val || this.currentScroll !== 0;
+    ...makeVToolbarProps(),
+    ...makeLayoutItemProps(),
+    height: {
+      type: [Number, String],
+      default: 64
     }
-
   },
-
-  created() {
-    if (this.invertedScroll) this.isActive = false;
+  emits: {
+    'update:modelValue': value => true
   },
 
-  methods: {
-    genBackground() {
-      const render = VToolbar.options.methods.genBackground.call(this);
-      render.data = this._b(render.data || {}, render.tag, {
-        style: {
-          opacity: this.computedOpacity
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const vToolbarRef = ref();
+    const isActive = useProxiedModel(props, 'modelValue');
+    const height = computed(() => {
+      var _vToolbarRef$value$co, _vToolbarRef$value, _vToolbarRef$value$ex, _vToolbarRef$value2;
+
+      const height = (_vToolbarRef$value$co = (_vToolbarRef$value = vToolbarRef.value) == null ? void 0 : _vToolbarRef$value.contentHeight) != null ? _vToolbarRef$value$co : 0;
+      const extensionHeight = (_vToolbarRef$value$ex = (_vToolbarRef$value2 = vToolbarRef.value) == null ? void 0 : _vToolbarRef$value2.extensionHeight) != null ? _vToolbarRef$value$ex : 0;
+      return height + extensionHeight;
+    });
+    const {
+      layoutItemStyles
+    } = useLayoutItem({
+      id: props.name,
+      priority: computed(() => parseInt(props.priority, 10)),
+      position: toRef(props, 'position'),
+      layoutSize: height,
+      elementSize: height,
+      active: isActive,
+      absolute: toRef(props, 'absolute')
+    });
+    return () => {
+      const [toolbarProps] = filterToolbarProps(props);
+      return _createVNode(VToolbar, _mergeProps({
+        "ref": vToolbarRef,
+        "class": ['v-app-bar', {
+          'v-app-bar--bottom': props.position === 'bottom'
+        }],
+        "style": { ...layoutItemStyles.value,
+          height: undefined
         }
-      });
-      return render;
-    },
-
-    updateApplication() {
-      return this.invertedScroll ? 0 : this.computedHeight + this.computedTransform;
-    },
-
-    thresholdMet() {
-      if (this.invertedScroll) {
-        this.isActive = this.currentScroll > this.computedScrollThreshold;
-        return;
-      }
-
-      if (this.hideOnScroll) {
-        this.isActive = this.isScrollingUp || this.currentScroll < this.computedScrollThreshold;
-      }
-
-      if (this.currentThreshold < this.computedScrollThreshold) return;
-      this.savedScroll = this.currentScroll;
-    }
-
-  },
-
-  render(h) {
-    const render = VToolbar.options.render.call(this, h);
-    render.data = render.data || {};
-
-    if (this.canScroll) {
-      render.data.directives = render.data.directives || [];
-      render.data.directives.push({
-        arg: this.scrollTarget,
-        name: 'scroll',
-        value: this.onScroll
-      });
-    }
-
-    return render;
+      }, toolbarProps), slots);
+    };
   }
 
 });

package/lib/components/VAppBar/VAppBar.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAppBar/VAppBar.ts"],"names":["VToolbar","Scroll","Applicationable","Scrollable","SSRBootable","Toggleable","convertToUnit","mixins","baseMixins","extend","name","directives","provide","VAppBar","props","clippedLeft","Boolean","clippedRight","collapseOnScroll","elevateOnScroll","fadeImgOnScroll","hideOnScroll","invertedScroll","scrollOffScreen","shrinkOnScroll","value","type","default","data","isActive","computed","applicationProperty","bottom","canScroll","options","call","isBooted","classes","collapse","absolute","app","fixed","hideShadow","currentScroll","scrollRatio","threshold","computedScrollThreshold","Math","max","computedContentHeight","min","dense","computedOriginalHeight","computedFontSize","isProminent","undefined","computedLeft","$vuetify","application","left","computedMarginTop","bar","computedOpacity","height","isExtended","parseInt","extensionHeight","computedRight","right","scrollThreshold","Number","computedTransform","computedHeight","isCollapsed","styles","fontSize","marginTop","transform","watch","callUpdate","val","created","methods","genBackground","render","_b","tag","style","opacity","updateApplication","thresholdMet","isScrollingUp","currentThreshold","savedScroll","h","push","arg","scrollTarget","onScroll"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VAppBar.sass'\n\n// Extensions\nimport VToolbar from '../VToolbar/VToolbar'\n\n// Directives\nimport Scroll from '../../directives/scroll'\n\n// Mixins\nimport Applicationable from '../../mixins/applicationable'\nimport Scrollable from '../../mixins/scrollable'\nimport SSRBootable from '../../mixins/ssr-bootable'\nimport Toggleable from '../../mixins/toggleable'\n\n// Utilities\nimport { convertToUnit } from '../../util/helpers'\nimport mixins from '../../util/mixins'\n\n// Types\nimport { VNode } from 'vue'\n\nconst baseMixins = mixins(\n  VToolbar,\n  Scrollable,\n  SSRBootable,\n  Toggleable,\n  Applicationable('top', [\n    'clippedLeft',\n    'clippedRight',\n    'computedHeight',\n    'invertedScroll',\n    'isExtended',\n    'isProminent',\n    'value',\n  ])\n)\n\n/* @vue/component */\nexport default baseMixins.extend({\n  name: 'v-app-bar',\n\n  directives: { Scroll },\n\n  provide (): object {\n    return { VAppBar: this }\n  },\n\n  props: {\n    clippedLeft: Boolean,\n    clippedRight: Boolean,\n    collapseOnScroll: Boolean,\n    elevateOnScroll: Boolean,\n    fadeImgOnScroll: Boolean,\n    hideOnScroll: Boolean,\n    invertedScroll: Boolean,\n    scrollOffScreen: Boolean,\n    shrinkOnScroll: Boolean,\n    value: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      isActive: this.value,\n    }\n  },\n\n  computed: {\n    applicationProperty (): string {\n      return !this.bottom ? 'top' : 'bottom'\n    },\n    canScroll (): boolean {\n      return (\n        Scrollable.options.computed.canScroll.call(this) &&\n        (\n          this.invertedScroll ||\n          this.elevateOnScroll ||\n          this.hideOnScroll ||\n          this.collapseOnScroll ||\n          this.isBooted ||\n          // If falsy, user has provided an\n          // explicit value which should\n          // overwrite anything we do\n          !this.value\n        )\n      )\n    },\n    classes (): object {\n      return {\n        ...VToolbar.options.computed.classes.call(this),\n        'v-toolbar--collapse': this.collapse || this.collapseOnScroll,\n        'v-app-bar': true,\n        'v-app-bar--clipped': this.clippedLeft || this.clippedRight,\n        'v-app-bar--fade-img-on-scroll': this.fadeImgOnScroll,\n        'v-app-bar--elevate-on-scroll': this.elevateOnScroll,\n        'v-app-bar--fixed': !this.absolute && (this.app || this.fixed),\n        'v-app-bar--hide-shadow': this.hideShadow,\n        'v-app-bar--is-scrolled': this.currentScroll > 0,\n        'v-app-bar--shrink-on-scroll': this.shrinkOnScroll,\n      }\n    },\n    scrollRatio (): number {\n      const threshold = this.computedScrollThreshold\n      return Math.max((threshold - this.currentScroll) / threshold, 0)\n    },\n    computedContentHeight (): number {\n      if (!this.shrinkOnScroll) return VToolbar.options.computed.computedContentHeight.call(this)\n\n      const min = this.dense ? 48 : 56\n      const max = this.computedOriginalHeight\n\n      return min + (max - min) * this.scrollRatio\n    },\n    computedFontSize (): number | undefined {\n      if (!this.isProminent) return undefined\n\n      const min = 1.25\n      const max = 1.5\n\n      return min + (max - min) * this.scrollRatio\n    },\n    computedLeft (): number {\n      if (!this.app || this.clippedLeft) return 0\n\n      return this.$vuetify.application.left\n    },\n    computedMarginTop (): number {\n      if (!this.app) return 0\n\n      return this.$vuetify.application.bar\n    },\n    computedOpacity (): number | undefined {\n      if (!this.fadeImgOnScroll) return undefined\n\n      return this.scrollRatio\n    },\n    computedOriginalHeight (): number {\n      let height = VToolbar.options.computed.computedContentHeight.call(this)\n      if (this.isExtended) height += parseInt(this.extensionHeight)\n      return height\n    },\n    computedRight (): number {\n      if (!this.app || this.clippedRight) return 0\n\n      return this.$vuetify.application.right\n    },\n    computedScrollThreshold (): number {\n      if (this.scrollThreshold) return Number(this.scrollThreshold)\n\n      return this.computedOriginalHeight - (this.dense ? 48 : 56)\n    },\n    computedTransform (): number {\n      if (\n        !this.canScroll ||\n        (this.elevateOnScroll && this.currentScroll === 0 && this.isActive)\n      ) return 0\n\n      if (this.isActive) return 0\n\n      const scrollOffScreen = this.scrollOffScreen\n        ? this.computedHeight\n        : this.computedContentHeight\n\n      return this.bottom ? scrollOffScreen : -scrollOffScreen\n    },\n    hideShadow (): boolean {\n      if (this.elevateOnScroll && this.isExtended) {\n        return this.currentScroll < this.computedScrollThreshold\n      }\n\n      if (this.elevateOnScroll) {\n        return this.currentScroll === 0 ||\n          this.computedTransform < 0\n      }\n\n      return (\n        !this.isExtended ||\n        this.scrollOffScreen\n      ) && this.computedTransform !== 0\n    },\n    isCollapsed (): boolean {\n      if (!this.collapseOnScroll) {\n        return VToolbar.options.computed.isCollapsed.call(this)\n      }\n\n      return this.currentScroll > 0\n    },\n    isProminent (): boolean {\n      return (\n        VToolbar.options.computed.isProminent.call(this) ||\n        this.shrinkOnScroll\n      )\n    },\n    styles (): object {\n      return {\n        ...VToolbar.options.computed.styles.call(this),\n        fontSize: convertToUnit(this.computedFontSize, 'rem'),\n        marginTop: convertToUnit(this.computedMarginTop),\n        transform: `translateY(${convertToUnit(this.computedTransform)})`,\n        left: convertToUnit(this.computedLeft),\n        right: convertToUnit(this.computedRight),\n      }\n    },\n  },\n\n  watch: {\n    canScroll: 'onScroll',\n    computedTransform () {\n      // Normally we do not want the v-app-bar\n      // to update the application top value\n      // to avoid screen jump. However, in\n      // this situation, we must so that\n      // the clipped drawer can update\n      // its top value when scrolled\n      if (\n        !this.canScroll ||\n        (!this.clippedLeft && !this.clippedRight)\n      ) return\n\n      this.callUpdate()\n    },\n    invertedScroll (val: boolean) {\n      this.isActive = !val || this.currentScroll !== 0\n    },\n  },\n\n  created () {\n    if (this.invertedScroll) this.isActive = false\n  },\n\n  methods: {\n    genBackground () {\n      const render = VToolbar.options.methods.genBackground.call(this)\n\n      render.data = this._b(render.data || {}, render.tag!, {\n        style: { opacity: this.computedOpacity },\n      })\n\n      return render\n    },\n    updateApplication (): number {\n      return this.invertedScroll\n        ? 0\n        : this.computedHeight + this.computedTransform\n    },\n    thresholdMet () {\n      if (this.invertedScroll) {\n        this.isActive = this.currentScroll > this.computedScrollThreshold\n        return\n      }\n\n      if (this.hideOnScroll) {\n        this.isActive = this.isScrollingUp ||\n          this.currentScroll < this.computedScrollThreshold\n      }\n\n      if (this.currentThreshold < this.computedScrollThreshold) return\n\n      this.savedScroll = this.currentScroll\n    },\n  },\n\n  render (h): VNode {\n    const render = VToolbar.options.render.call(this, h)\n\n    render.data = render.data || {}\n\n    if (this.canScroll) {\n      render.data.directives = render.data.directives || []\n      render.data.directives.push({\n        arg: this.scrollTarget,\n        name: 'scroll',\n        value: this.onScroll,\n      })\n    }\n\n    return render\n  },\n})\n"],"file":"VAppBar.mjs"}
+{"version":3,"sources":["../../../src/components/VAppBar/VAppBar.tsx"],"names":["filterToolbarProps","makeVToolbarProps","VToolbar","makeLayoutItemProps","useLayoutItem","useProxiedModel","computed","ref","toRef","defineComponent","VAppBar","name","props","modelValue","type","Boolean","default","position","String","validator","value","includes","height","Number","emits","setup","slots","vToolbarRef","isActive","contentHeight","extensionHeight","layoutItemStyles","id","priority","parseInt","layoutSize","elementSize","active","absolute","toolbarProps","undefined"],"mappings":";AAAA;AACA,uB,CAEA;;SACSA,kB,EAAoBC,iB,EAAmBC,Q,oCAEhD;;SACSC,mB,EAAqBC,a;SACrBC,e,8CAET;;AACA,SAASC,QAAT,EAAmBC,GAAnB,EAAwBC,KAAxB,QAAqC,KAArC;SACSC,e,gCAET;;AAGA,OAAO,MAAMC,OAAO,GAAGD,eAAe,CAAC;AACrCE,EAAAA,IAAI,EAAE,SAD+B;AAGrCC,EAAAA,KAAK,EAAE;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACAC,IAAAA,UAAU,EAAE;AACVC,MAAAA,IAAI,EAAEC,OADI;AAEVC,MAAAA,OAAO,EAAE;AAFC,KARP;AAYLC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,IAAI,EAAEI,MADE;AAERF,MAAAA,OAAO,EAAE,KAFD;AAGRG,MAAAA,SAAS,EAAGC,KAAD,IAAgB,CAAC,KAAD,EAAQ,QAAR,EAAkBC,QAAlB,CAA2BD,KAA3B;AAHnB,KAZL;AAkBL,OAAGnB,iBAAiB,EAlBf;AAmBL,OAAGE,mBAAmB,EAnBjB;AAqBLmB,IAAAA,MAAM,EAAE;AACNR,MAAAA,IAAI,EAAE,CAACS,MAAD,EAASL,MAAT,CADA;AAENF,MAAAA,OAAO,EAAE;AAFH;AArBH,GAH8B;AA8BrCQ,EAAAA,KAAK,EAAE;AACL,yBAAsBJ,KAAD,IAAoB;AADpC,GA9B8B;;AAkCrCK,EAAAA,KAAK,CAAEb,KAAF,QAAoB;AAAA,QAAX;AAAEc,MAAAA;AAAF,KAAW;AACvB,UAAMC,WAAW,GAAGpB,GAAG,EAAvB;AACA,UAAMqB,QAAQ,GAAGvB,eAAe,CAACO,KAAD,EAAQ,YAAR,CAAhC;AACA,UAAMU,MAAM,GAAGhB,QAAQ,CAAC,MAAM;AAAA;;AAC5B,YAAMgB,MAAc,kDAAGK,WAAW,CAACP,KAAf,qBAAG,mBAAmBS,aAAtB,oCAAuC,CAA3D;AACA,YAAMC,eAAuB,mDAAGH,WAAW,CAACP,KAAf,qBAAG,oBAAmBU,eAAtB,oCAAyC,CAAtE;AAEA,aAAQR,MAAM,GAAGQ,eAAjB;AACD,KALsB,CAAvB;AAMA,UAAM;AAAEC,MAAAA;AAAF,QAAuB3B,aAAa,CAAC;AACzC4B,MAAAA,EAAE,EAAEpB,KAAK,CAACD,IAD+B;AAEzCsB,MAAAA,QAAQ,EAAE3B,QAAQ,CAAC,MAAM4B,QAAQ,CAACtB,KAAK,CAACqB,QAAP,EAAiB,EAAjB,CAAf,CAFuB;AAGzChB,MAAAA,QAAQ,EAAET,KAAK,CAACI,KAAD,EAAQ,UAAR,CAH0B;AAIzCuB,MAAAA,UAAU,EAAEb,MAJ6B;AAKzCc,MAAAA,WAAW,EAAEd,MAL4B;AAMzCe,MAAAA,MAAM,EAAET,QANiC;AAOzCU,MAAAA,QAAQ,EAAE9B,KAAK,CAACI,KAAD,EAAQ,UAAR;AAP0B,KAAD,CAA1C;AAUA,WAAO,MAAM;AACX,YAAM,CAAC2B,YAAD,IAAiBvC,kBAAkB,CAACY,KAAD,CAAzC;AAEA;AAAA,eAEUe,WAFV;AAAA,iBAGW,CACL,WADK,EAEL;AACE,+BAAqBf,KAAK,CAACK,QAAN,KAAmB;AAD1C,SAFK,CAHX;AAAA,iBASW,EACL,GAAGc,gBAAgB,CAACX,KADf;AAELE,UAAAA,MAAM,EAAEkB;AAFH;AATX,SAaSD,YAbT,GAccb,KAdd;AAiBD,KApBD;AAqBD;;AA1EoC,CAAD,CAA/B","sourcesContent":["// Styles\nimport './VAppBar.sass'\n\n// Components\nimport { filterToolbarProps, makeVToolbarProps, VToolbar } from '@/components/VToolbar/VToolbar'\n\n// Composables\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { defineComponent } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VAppBar = defineComponent({\n  name: 'VAppBar',\n\n  props: {\n    // TODO: Implement scrolling techniques\n    // hideOnScroll: Boolean\n    // invertedScroll: Boolean\n    // collapseOnScroll: Boolean\n    // elevateOnScroll: Boolean\n    // shrinkOnScroll: Boolean\n    // fadeImageOnScroll: Boolean\n    modelValue: {\n      type: Boolean,\n      default: true,\n    },\n    position: {\n      type: String as PropType<'top' | 'bottom'>,\n      default: 'top',\n      validator: (value: any) => ['top', 'bottom'].includes(value),\n    },\n\n    ...makeVToolbarProps(),\n    ...makeLayoutItemProps(),\n\n    height: {\n      type: [Number, String],\n      default: 64,\n    },\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { slots }) {\n    const vToolbarRef = ref()\n    const isActive = useProxiedModel(props, 'modelValue')\n    const height = computed(() => {\n      const height: number = vToolbarRef.value?.contentHeight ?? 0\n      const extensionHeight: number = vToolbarRef.value?.extensionHeight ?? 0\n\n      return (height + extensionHeight)\n    })\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      priority: computed(() => parseInt(props.priority, 10)),\n      position: toRef(props, 'position'),\n      layoutSize: height,\n      elementSize: height,\n      active: isActive,\n      absolute: toRef(props, 'absolute'),\n    })\n\n    return () => {\n      const [toolbarProps] = filterToolbarProps(props)\n\n      return (\n        <VToolbar\n          ref={ vToolbarRef }\n          class={[\n            'v-app-bar',\n            {\n              'v-app-bar--bottom': props.position === 'bottom',\n            },\n          ]}\n          style={{\n            ...layoutItemStyles.value,\n            height: undefined,\n          }}\n          { ...toolbarProps }\n          v-slots={ slots }\n        />\n      )\n    }\n  },\n})\n\nexport type VAppBar = InstanceType<typeof VAppBar>\n"],"file":"VAppBar.mjs"}

package/lib/components/VAppBar/VAppBar.sass

@@ -1,58 +1,12 @@
-@import './_variables.scss'
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
-+theme('v-app-bar.v-toolbar.v-sheet') using ($material)
-  background-color: map-get($material, 'app-bar')
-
-+sheet('v-app-bar.v-toolbar', $app-bar-elevation, $app-bar-border-radius, $app-bar-shaped-border-radius)
-
-// Block
 .v-app-bar
-  +bootable()
-
-// Modifier
-.v-app-bar.v-app-bar--fixed
-  position: fixed
-  top: 0
-  z-index: 5
-
-.v-app-bar.v-app-bar--hide-shadow
-  // Workaround for cascaded elevation styles
-  // that persist when the bar is inactive.
-  +elevation(0, true)
-
-.v-app-bar--fade-img-on-scroll
-  .v-toolbar__image .v-image__image
-    transition: $app-bar-transition
-
-.v-app-bar.v-toolbar--prominent.v-app-bar--shrink-on-scroll
-  .v-toolbar__content
-    will-change: height
-
-  .v-toolbar__image
-    will-change: opacity
-
-  &.v-app-bar--collapse-on-scroll
-    .v-toolbar__extension
-      display: none
-
-  &.v-app-bar--is-scrolled
-    .v-toolbar__title
-      padding-top: $app-bar-scrolled-title-padding-bottom
-
-    &:not(.v-app-bar--bottom)
-      .v-toolbar__title
-        padding-bottom: $app-bar-scrolled-title-padding-bottom
-
-.v-app-bar.v-app-bar--shrink-on-scroll
-  .v-toolbar__title
-    font-size: inherit
+  display: flex
 
-.v-app-bar-title
-  &__placeholder,
-  &__content
-    overflow: hidden
-    text-overflow: ellipsis
-    white-space: nowrap
+  &.v-toolbar
+    @include tools.theme($app-bar-theme...)
 
-  &__content
-    position: absolute
+    &:not(.v-toolbar--flat)
+      @include tools.elevation($app-bar-elevation)

package/lib/components/VAppBar/VAppBarNavIcon.mjs

@@ -1,32 +1,31 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Components
-import VIcon from "../VIcon/index.mjs";
-import VBtn from "../VBtn/VBtn.mjs"; // Types
+import { VBtn } from "../VBtn/index.mjs"; // Utilities
 
-import Vue from 'vue';
-/* @vue/component */
+import { defineComponent } from "../../util/index.mjs";
+export const VAppBarNavIcon = defineComponent({
+  name: 'VAppBarNavIcon',
+  props: {
+    icon: {
+      type: String,
+      default: '$menu'
+    }
+  },
 
-export default Vue.extend({
-  name: 'v-app-bar-nav-icon',
-  functional: true,
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    return () => {
+      var _slots$default;
 
-  render(h, {
-    slots,
-    listeners,
-    props,
-    data
-  }) {
-    const d = Object.assign(data, {
-      staticClass: "v-app-bar__nav-icon ".concat(data.staticClass || '').trim(),
-      props: { ...props,
-        icon: true
-      },
-      on: listeners
-    });
-    const defaultSlot = slots().default;
-    return h(VBtn, d, defaultSlot || [h(VIcon, '$menu')]);
+      return _createVNode(VBtn, {
+        "class": "v-app-bar-nav-icon",
+        "icon": props.icon
+      }, {
+        default: () => [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]
+      });
+    };
   }
 
 });

package/lib/components/VAppBar/VAppBarNavIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAppBar/VAppBarNavIcon.ts"],"names":["VIcon","VBtn","Vue","extend","name","functional","render","h","slots","listeners","props","data","d","Object","assign","staticClass","trim","icon","on","defaultSlot","default"],"mappings":"AAAA;;AACA;AAEA;OACOA,K;OACAC,I,0BAEP;;AACA,OAAOC,GAAP,MAAgB,KAAhB;AAEA;;AACA,eAAeA,GAAG,CAACC,MAAJ,CAAW;AACxBC,EAAAA,IAAI,EAAE,oBADkB;AAGxBC,EAAAA,UAAU,EAAE,IAHY;;AAKxBC,EAAAA,MAAM,CAAEC,CAAF,EAAK;AAAEC,IAAAA,KAAF;AAASC,IAAAA,SAAT;AAAoBC,IAAAA,KAApB;AAA2BC,IAAAA;AAA3B,GAAL,EAAwC;AAC5C,UAAMC,CAAC,GAAGC,MAAM,CAACC,MAAP,CAAcH,IAAd,EAAoB;AAC5BI,MAAAA,WAAW,EAAE,8BAAwBJ,IAAI,CAACI,WAAL,IAAoB,EAA5C,EAAkDC,IAAlD,EADe;AAE5BN,MAAAA,KAAK,EAAE,EACL,GAAGA,KADE;AAELO,QAAAA,IAAI,EAAE;AAFD,OAFqB;AAM5BC,MAAAA,EAAE,EAAET;AANwB,KAApB,CAAV;AASA,UAAMU,WAAW,GAAGX,KAAK,GAAGY,OAA5B;AAEA,WAAOb,CAAC,CAACN,IAAD,EAAOW,CAAP,EAAUO,WAAW,IAAI,CAACZ,CAAC,CAACP,KAAD,EAAQ,OAAR,CAAF,CAAzB,CAAR;AACD;;AAlBuB,CAAX,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Components\nimport VIcon from '../VIcon'\nimport VBtn from '../VBtn/VBtn'\n\n// Types\nimport Vue from 'vue'\n\n/* @vue/component */\nexport default Vue.extend({\n  name: 'v-app-bar-nav-icon',\n\n  functional: true,\n\n  render (h, { slots, listeners, props, data }) {\n    const d = Object.assign(data, {\n      staticClass: (`v-app-bar__nav-icon ${data.staticClass || ''}`).trim(),\n      props: {\n        ...props,\n        icon: true,\n      },\n      on: listeners,\n    })\n\n    const defaultSlot = slots().default\n\n    return h(VBtn, d, defaultSlot || [h(VIcon, '$menu')])\n  },\n})\n"],"file":"VAppBarNavIcon.mjs"}
+{"version":3,"sources":["../../../src/components/VAppBar/VAppBarNavIcon.tsx"],"names":["VBtn","defineComponent","VAppBarNavIcon","name","props","icon","type","String","default","setup","slots"],"mappings":";AAAA;SACSA,I,6BAET;;SACSC,e;AAET,OAAO,MAAMC,cAAc,GAAGD,eAAe,CAAC;AAC5CE,EAAAA,IAAI,EAAE,gBADsC;AAG5CC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE;AACJC,MAAAA,IAAI,EAAEC,MADF;AAEJC,MAAAA,OAAO,EAAE;AAFL;AADD,GAHqC;;AAU5CC,EAAAA,KAAK,CAAEL,KAAF,QAAoB;AAAA,QAAX;AAAEM,MAAAA;AAAF,KAAW;AACvB,WAAO;AAAA;;AAAA;AAAA,iBACO,oBADP;AAAA,gBACmCN,KAAK,CAACC;AADzC;AAAA,0CAEDK,KAAK,CAACF,OAFL,qBAED,oBAAAE,KAAK,CAFJ;AAAA;AAAA,KAAP;AAKD;;AAhB2C,CAAD,CAAtC","sourcesContent":["// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VAppBarNavIcon = defineComponent({\n  name: 'VAppBarNavIcon',\n\n  props: {\n    icon: {\n      type: String,\n      default: '$menu',\n    },\n  },\n\n  setup (props, { slots }) {\n    return () => (\n      <VBtn class=\"v-app-bar-nav-icon\" icon={ props.icon }>\n        { slots.default?.() }\n      </VBtn>\n    )\n  },\n})\n"],"file":"VAppBarNavIcon.mjs"}

package/lib/components/VAppBar/VAppBarTitle.mjs

@@ -1,65 +1,18 @@
-// @ts-nocheck
-
-/* eslint-disable */
-// Mixins
-import { inject } from "../../mixins/registrable.mjs"; // Types
-
-// Utilities
-import { convertToUnit } from "../../util/helpers.mjs";
-import { easeInOutCubic } from "../../services/goto/easing-patterns.mjs";
-const base = inject('VAppBar', 'v-app-bar-title', 'v-app-bar');
-export default base.extend().extend({
-  name: 'v-app-bar-title',
-  data: () => ({
-    contentWidth: 0,
-    left: 0,
-    width: 0
-  }),
-  watch: {
-    '$vuetify.breakpoint.width': 'updateDimensions'
-  },
-  computed: {
-    styles() {
-      if (!this.contentWidth) return {};
-      const min = this.width;
-      const max = this.contentWidth;
-      const ratio = easeInOutCubic(Math.min(1, this.VAppBar.scrollRatio * 1.5));
-      return {
-        width: convertToUnit(min + (max - min) * ratio),
-        visibility: this.VAppBar.scrollRatio ? 'visible' : 'hidden'
-      };
-    }
-
-  },
-
-  mounted() {
-    this.updateDimensions();
-  },
-
-  methods: {
-    updateDimensions() {
-      const dimensions = this.$refs.placeholder.getBoundingClientRect();
-      this.width = dimensions.width;
-      this.left = dimensions.left;
-      this.contentWidth = this.$refs.content.scrollWidth;
-    }
-
-  },
-
-  render(h) {
-    return h('div', {
-      class: 'v-toolbar__title v-app-bar-title'
-    }, [h('div', {
-      class: 'v-app-bar-title__content',
-      style: this.styles,
-      ref: 'content'
-    }, [this.$slots.default]), h('div', {
-      class: 'v-app-bar-title__placeholder',
-      style: {
-        visibility: this.VAppBar.scrollRatio ? 'hidden' : 'visible'
-      },
-      ref: 'placeholder'
-    }, [this.$slots.default])]);
+import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
+// Composables
+import { VToolbarTitle } from "../VToolbar/index.mjs"; // Utilities
+
+import { defineComponent } from "../../util/index.mjs";
+export const VAppBarTitle = defineComponent({ ...VToolbarTitle,
+  name: 'VAppBarTitle',
+
+  setup(_, _ref) {
+    let {
+      slots
+    } = _ref;
+    return () => _createVNode(VToolbarTitle, {
+      "class": "v-app-bar-title"
+    }, slots);
   }
 
 });

package/lib/components/VAppBar/VAppBarTitle.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VAppBar/VAppBarTitle.ts"],"names":["inject","convertToUnit","easeInOutCubic","base","extend","name","data","contentWidth","left","width","watch","computed","styles","min","max","ratio","Math","VAppBar","scrollRatio","visibility","mounted","updateDimensions","methods","dimensions","$refs","placeholder","getBoundingClientRect","content","scrollWidth","render","h","class","style","ref","$slots","default"],"mappings":"AAAA;;AACA;AAEA;SACSA,M,wCAET;;AAKA;SACSC,a;SACAC,c;AAET,MAAMC,IAAI,GAAGH,MAAM,CAA4B,SAA5B,EAAuC,iBAAvC,EAA0D,WAA1D,CAAnB;AASA,eAAeG,IAAI,CAACC,MAAL,GAAuBA,MAAvB,CAA8B;AAC3CC,EAAAA,IAAI,EAAE,iBADqC;AAG3CC,EAAAA,IAAI,EAAE,OAAO;AACXC,IAAAA,YAAY,EAAE,CADH;AAEXC,IAAAA,IAAI,EAAE,CAFK;AAGXC,IAAAA,KAAK,EAAE;AAHI,GAAP,CAHqC;AAS3CC,EAAAA,KAAK,EAAE;AACL,iCAA6B;AADxB,GAToC;AAa3CC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,MAAM,GAAY;AAChB,UAAI,CAAC,KAAKL,YAAV,EAAwB,OAAO,EAAP;AAExB,YAAMM,GAAG,GAAG,KAAKJ,KAAjB;AACA,YAAMK,GAAG,GAAG,KAAKP,YAAjB;AACA,YAAMQ,KAAK,GAAGb,cAAc,CAACc,IAAI,CAACH,GAAL,CAAS,CAAT,EAAY,KAAKI,OAAL,CAAaC,WAAb,GAA2B,GAAvC,CAAD,CAA5B;AACA,aAAO;AACLT,QAAAA,KAAK,EAAER,aAAa,CAACY,GAAG,GAAG,CAACC,GAAG,GAAGD,GAAP,IAAcE,KAArB,CADf;AAELI,QAAAA,UAAU,EAAE,KAAKF,OAAL,CAAaC,WAAb,GAA2B,SAA3B,GAAuC;AAF9C,OAAP;AAID;;AAXO,GAbiC;;AA2B3CE,EAAAA,OAAO,GAAI;AACT,SAAKC,gBAAL;AACD,GA7B0C;;AA+B3CC,EAAAA,OAAO,EAAE;AACPD,IAAAA,gBAAgB,GAAU;AACxB,YAAME,UAAU,GAAG,KAAKC,KAAL,CAAWC,WAAX,CAAuBC,qBAAvB,EAAnB;AACA,WAAKjB,KAAL,GAAac,UAAU,CAACd,KAAxB;AACA,WAAKD,IAAL,GAAYe,UAAU,CAACf,IAAvB;AACA,WAAKD,YAAL,GAAoB,KAAKiB,KAAL,CAAWG,OAAX,CAAmBC,WAAvC;AACD;;AANM,GA/BkC;;AAwC3CC,EAAAA,MAAM,CAAEC,CAAF,EAAY;AAChB,WAAOA,CAAC,CAAC,KAAD,EAAQ;AACdC,MAAAA,KAAK,EAAE;AADO,KAAR,EAEL,CACDD,CAAC,CAAC,KAAD,EAAQ;AACPC,MAAAA,KAAK,EAAE,0BADA;AAEPC,MAAAA,KAAK,EAAE,KAAKpB,MAFL;AAGPqB,MAAAA,GAAG,EAAE;AAHE,KAAR,EAIE,CAAC,KAAKC,MAAL,CAAYC,OAAb,CAJF,CADA,EAMDL,CAAC,CAAC,KAAD,EAAQ;AACPC,MAAAA,KAAK,EAAE,8BADA;AAEPC,MAAAA,KAAK,EAAE;AACLb,QAAAA,UAAU,EAAE,KAAKF,OAAL,CAAaC,WAAb,GAA2B,QAA3B,GAAsC;AAD7C,OAFA;AAKPe,MAAAA,GAAG,EAAE;AALE,KAAR,EAME,CAAC,KAAKC,MAAL,CAAYC,OAAb,CANF,CANA,CAFK,CAAR;AAgBD;;AAzD0C,CAA9B,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Mixins\nimport { inject } from '../../mixins/registrable'\n\n// Types\nimport { VNode } from 'vue'\nimport { ExtractVue } from '../../util/mixins'\nimport VAppBar from './VAppBar'\n\n// Utilities\nimport { convertToUnit } from '../../util/helpers'\nimport { easeInOutCubic } from '../../services/goto/easing-patterns'\n\nconst base = inject<'VAppBar', typeof VAppBar>('VAppBar', 'v-app-bar-title', 'v-app-bar')\n\ninterface options extends ExtractVue<typeof base> {\n  $refs: {\n    content: Element\n    placeholder: Element\n  }\n}\n\nexport default base.extend<options>().extend({\n  name: 'v-app-bar-title',\n\n  data: () => ({\n    contentWidth: 0,\n    left: 0,\n    width: 0,\n  }),\n\n  watch: {\n    '$vuetify.breakpoint.width': 'updateDimensions',\n  },\n\n  computed: {\n    styles (): object {\n      if (!this.contentWidth) return {}\n\n      const min = this.width\n      const max = this.contentWidth\n      const ratio = easeInOutCubic(Math.min(1, this.VAppBar.scrollRatio * 1.5))\n      return {\n        width: convertToUnit(min + (max - min) * ratio),\n        visibility: this.VAppBar.scrollRatio ? 'visible' : 'hidden',\n      }\n    },\n  },\n\n  mounted () {\n    this.updateDimensions()\n  },\n\n  methods: {\n    updateDimensions (): void {\n      const dimensions = this.$refs.placeholder.getBoundingClientRect()\n      this.width = dimensions.width\n      this.left = dimensions.left\n      this.contentWidth = this.$refs.content.scrollWidth\n    },\n  },\n\n  render (h): VNode {\n    return h('div', {\n      class: 'v-toolbar__title v-app-bar-title',\n    }, [\n      h('div', {\n        class: 'v-app-bar-title__content',\n        style: this.styles,\n        ref: 'content',\n      }, [this.$slots.default]),\n      h('div', {\n        class: 'v-app-bar-title__placeholder',\n        style: {\n          visibility: this.VAppBar.scrollRatio ? 'hidden' : 'visible',\n        },\n        ref: 'placeholder',\n      }, [this.$slots.default]),\n    ])\n  },\n})\n"],"file":"VAppBarTitle.mjs"}
+{"version":3,"sources":["../../../src/components/VAppBar/VAppBarTitle.tsx"],"names":["VToolbarTitle","defineComponent","VAppBarTitle","name","setup","_","slots"],"mappings":";AAAA;SACSA,a,iCAET;;SACSC,e;AAET,OAAO,MAAMC,YAAY,GAAGD,eAAe,CAAC,EAC1C,GAAGD,aADuC;AAG1CG,EAAAA,IAAI,EAAE,cAHoC;;AAK1CC,EAAAA,KAAK,CAAEC,CAAF,QAAgB;AAAA,QAAX;AAAEC,MAAAA;AAAF,KAAW;AACnB,WAAO;AAAA,eAEG;AAFH,OAGOA,KAHP,CAAP;AAMD;;AAZyC,CAAD,CAApC","sourcesContent":["// Composables\nimport { VToolbarTitle } from '@/components/VToolbar'\n\n// Utilities\nimport { defineComponent } from '@/util'\n\nexport const VAppBarTitle = defineComponent({\n  ...VToolbarTitle,\n\n  name: 'VAppBarTitle',\n\n  setup (_, { slots }) {\n    return () => (\n      <VToolbarTitle\n        class=\"v-app-bar-title\"\n        v-slots={ slots }\n      />\n    )\n  },\n}) as typeof VToolbarTitle\n"],"file":"VAppBarTitle.mjs"}

package/lib/components/VAppBar/_variables.scss

@@ -1,7 +1,42 @@
-@import '../../styles/styles.sass';
+@use "sass:map";
+@use "../../styles/settings/variables";
+@use "../../styles/tools/functions";
 
-$app-bar-border-radius: 0 !default;
+$app-bar-background: rgb(var(--v-theme-surface)) !default;
+$app-bar-border-color: variables.$border-color-root !default;
+$app-bar-border-radius: map.get(variables.$rounded, '0') !default;
+$app-bar-border-style: variables.$border-style-root !default;
+$app-bar-border-thin-width: 0 0 thin !default;
+$app-bar-border-width: 0 !default;
+$app-bar-collapsed-border-radius: 24px !default;
+$app-bar-collapsed-max-width: 112px !default;
+$app-bar-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
+$app-bar-density-comfortable-padding: 4px !default;
+$app-bar-density-compact-padding: 0 !default;
+$app-bar-density-default-padding: 8px !default;
 $app-bar-elevation: 4 !default;
+$app-bar-flat-elevation: 0 !default;
+$app-bar-image-height: inherit !default;
+$app-bar-image-object-fit: cover !default;
+$app-bar-image-width: inherit !default;
+$app-bar-padding-end: 4px !default;
+$app-bar-padding-start: 4px !default;
+$app-bar-prominent-height: 128px !default;
+$app-bar-rounded-border-radius: variables.$border-radius-root !default;
 $app-bar-scrolled-title-padding-bottom: 9px !default;
-$app-bar-shaped-border-radius: map-get($rounded, 'xl') $app-bar-border-radius !default;
-$app-bar-transition: .4s opacity map-get($transition, 'fast-out-slow-in') !default;
+$app-bar-shaped-border-radius: map.get(variables.$rounded, 'xl') $app-bar-border-radius !default;
+$app-bar-title-font-size: functions.map-deep-get(variables.$typography, 'h5', 'size') !default;
+$app-bar-title-padding: 6px 20px !default;
+$app-bar-transition: .2s variables.$standard-easing !default;
+
+$app-bar-border: (
+  $app-bar-border-color,
+  $app-bar-border-style,
+  $app-bar-border-width,
+  $app-bar-border-thin-width
+) !default;
+
+$app-bar-theme: (
+  $app-bar-background,
+  $app-bar-color
+) !default;