vuetify 3.1.3 → 3.1.5

package/lib/components/VStepper/VStepper.sass

@@ -128,7 +128,7 @@
           font-size: $stepper-step-error-icon-font-size
           color: inherit
 
-      .v-stepper__label
+      .v-stepper & .v-stepper__label
         color: inherit
         text-shadow: none
         font-weight: 500
@@ -137,9 +137,8 @@
           color: inherit
 
   &__label
-    align-items: flex-start
-    display: flex
-    flex-direction: column
+    display: block
+    flex-grow: 1
     line-height: $stepper-label-line-height
 
     +ltr()
@@ -149,6 +148,7 @@
       text-align: right
 
     small
+      display: block
       font-size: $stepper-label-small-font-size
       font-weight: $stepper-label-small-font-weight
       text-shadow: none
@@ -186,7 +186,7 @@
         padding: $stepper-vertical-content-ltr-padding
       +rtl()
         padding: $stepper-vertical-content-rtl-padding
-  
+
       width: auto
       +ltr()
         margin: $stepper-vertical-content-ltr-margin
@@ -219,7 +219,7 @@
       flex-basis: $stepper-alt-labels-flex-basis
 
       small
-        align-self: center
+        text-align: center
 
     .v-stepper__step__step
       margin-bottom: $stepper-alt-labels-step-step-margin-bottom

package/lib/components/VStepper/VStepperStep.mjs

@@ -5,7 +5,8 @@ import VIcon from "../VIcon/index.mjs"; // Mixins
 import Colorable from "../../mixins/colorable.mjs";
 import { inject as RegistrableInject } from "../../mixins/registrable.mjs"; // Directives
 import ripple from "../../directives/ripple/index.mjs"; // Utilities
-import mixins from "../../util/mixins.mjs"; // Types
+import mixins from "../../util/mixins.mjs";
+import { keyCodes } from "../../util/helpers.mjs"; // Types
 const baseMixins = mixins(Colorable, RegistrableInject('stepper', 'v-stepper-step', 'v-stepper'));
 /* @vue/component */
 export default baseMixins.extend().extend({
@@ -102,6 +103,11 @@ export default baseMixins.extend().extend({
       }
       return children;
     },
+    keyboardClick(e) {
+      if (e.keyCode === keyCodes.space) {
+        this.click(e);
+      }
+    },
     toggle(step) {
       this.isActive = step.toString() === this.step.toString();
       this.isInactive = Number(step) < Number(this.step);
@@ -109,6 +115,9 @@ export default baseMixins.extend().extend({
   },
   render(h) {
     return h('div', {
+      attrs: {
+        tabindex: this.editable ? 0 : -1
+      },
       staticClass: 'v-stepper__step',
       class: this.classes,
       directives: [{
@@ -116,7 +125,8 @@ export default baseMixins.extend().extend({
         value: this.editable
       }],
       on: {
-        click: this.click
+        click: this.click,
+        keydown: this.keyboardClick
       }
     }, [this.genStep(), this.genLabel()]);
   }

package/lib/components/VStepper/VStepperStep.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VStepperStep.mjs","names":["VIcon","Colorable","inject","RegistrableInject","ripple","mixins","baseMixins","extend","name","directives","props","color","type","String","default","complete","Boolean","completeIcon","editable","editIcon","errorIcon","rules","Array","step","Number","data","isActive","isInactive","computed","classes","hasError","some","validate","mounted","stepper","register","beforeDestroy","unregister","methods","click","e","stopPropagation","$emit","stepClick","genIcon","icon","$createElement","genLabel","staticClass","$slots","genStep","setBackgroundColor","genStepContent","children","push","toggle","toString","render","h","class","value","on"],"sources":["../../../src/components/VStepper/VStepperStep.ts"],"sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Components\nimport VIcon from '../VIcon'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport { inject as RegistrableInject } from '../../mixins/registrable'\n\n// Directives\nimport ripple from '../../directives/ripple'\n\n// Utilities\nimport mixins from '../../util/mixins'\n\n// Types\nimport { VNode } from 'vue'\nimport { PropValidator } from 'vue/types/options'\n\ntype VuetifyStepperRuleValidator = () => string | boolean\n\nconst baseMixins = mixins(\n  Colorable,\n  RegistrableInject('stepper', 'v-stepper-step', 'v-stepper')\n)\n\ninterface options extends InstanceType<typeof baseMixins> {\n  stepClick: (step: number | string) => void\n}\n/* @vue/component */\nexport default baseMixins.extend<options>().extend({\n  name: 'v-stepper-step',\n\n  directives: { ripple },\n\n  inject: ['stepClick'],\n\n  props: {\n    color: {\n      type: String,\n      default: 'primary',\n    },\n    complete: Boolean,\n    completeIcon: {\n      type: String,\n      default: '$complete',\n    },\n    editable: Boolean,\n    editIcon: {\n      type: String,\n      default: '$edit',\n    },\n    errorIcon: {\n      type: String,\n      default: '$error',\n    },\n    rules: {\n      type: Array,\n      default: () => [],\n    } as PropValidator<VuetifyStepperRuleValidator[]>,\n    step: [Number, String],\n  },\n\n  data () {\n    return {\n      isActive: false,\n      isInactive: true,\n    }\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        'v-stepper__step--active': this.isActive,\n        'v-stepper__step--editable': this.editable,\n        'v-stepper__step--inactive': this.isInactive,\n        'v-stepper__step--error error--text': this.hasError,\n        'v-stepper__step--complete': this.complete,\n      }\n    },\n    hasError (): boolean {\n      return this.rules.some(validate => validate() !== true)\n    },\n  },\n\n  mounted () {\n    this.stepper && this.stepper.register(this)\n  },\n\n  beforeDestroy () {\n    this.stepper && this.stepper.unregister(this)\n  },\n\n  methods: {\n    click (e: MouseEvent) {\n      e.stopPropagation()\n\n      this.$emit('click', e)\n\n      if (this.editable) {\n        this.stepClick(this.step)\n      }\n    },\n    genIcon (icon: string) {\n      return this.$createElement(VIcon, icon)\n    },\n    genLabel () {\n      return this.$createElement('div', {\n        staticClass: 'v-stepper__label',\n      }, this.$slots.default)\n    },\n    genStep () {\n      const color = (!this.hasError && (this.complete || this.isActive)) ? this.color : false\n\n      return this.$createElement('span', this.setBackgroundColor(color, {\n        staticClass: 'v-stepper__step__step',\n      }), this.genStepContent())\n    },\n    genStepContent () {\n      const children = []\n\n      if (this.hasError) {\n        children.push(this.genIcon(this.errorIcon))\n      } else if (this.complete) {\n        if (this.editable) {\n          children.push(this.genIcon(this.editIcon))\n        } else {\n          children.push(this.genIcon(this.completeIcon))\n        }\n      } else {\n        children.push(String(this.step))\n      }\n\n      return children\n    },\n    toggle (step: number | string) {\n      this.isActive = step.toString() === this.step.toString()\n      this.isInactive = Number(step) < Number(this.step)\n    },\n  },\n\n  render (h): VNode {\n    return h('div', {\n      staticClass: 'v-stepper__step',\n      class: this.classes,\n      directives: [{\n        name: 'ripple',\n        value: this.editable,\n      }],\n      on: { click: this.click },\n    }, [\n      this.genStep(),\n      this.genLabel(),\n    ])\n  },\n})\n"],"mappings":"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"}
+{"version":3,"file":"VStepperStep.mjs","names":["VIcon","Colorable","inject","RegistrableInject","ripple","mixins","keyCodes","baseMixins","extend","name","directives","props","color","type","String","default","complete","Boolean","completeIcon","editable","editIcon","errorIcon","rules","Array","step","Number","data","isActive","isInactive","computed","classes","hasError","some","validate","mounted","stepper","register","beforeDestroy","unregister","methods","click","e","stopPropagation","$emit","stepClick","genIcon","icon","$createElement","genLabel","staticClass","$slots","genStep","setBackgroundColor","genStepContent","children","push","keyboardClick","keyCode","space","toggle","toString","render","h","attrs","tabindex","class","value","on","keydown"],"sources":["../../../src/components/VStepper/VStepperStep.ts"],"sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Components\nimport VIcon from '../VIcon'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport { inject as RegistrableInject } from '../../mixins/registrable'\n\n// Directives\nimport ripple from '../../directives/ripple'\n\n// Utilities\nimport mixins from '../../util/mixins'\nimport { keyCodes } from '../../util/helpers'\n\n// Types\nimport { VNode } from 'vue'\nimport { PropValidator } from 'vue/types/options'\n\ntype VuetifyStepperRuleValidator = () => string | boolean\n\nconst baseMixins = mixins(\n  Colorable,\n  RegistrableInject('stepper', 'v-stepper-step', 'v-stepper')\n)\n\ninterface options extends InstanceType<typeof baseMixins> {\n  stepClick: (step: number | string) => void\n}\n/* @vue/component */\nexport default baseMixins.extend<options>().extend({\n  name: 'v-stepper-step',\n\n  directives: { ripple },\n\n  inject: ['stepClick'],\n\n  props: {\n    color: {\n      type: String,\n      default: 'primary',\n    },\n    complete: Boolean,\n    completeIcon: {\n      type: String,\n      default: '$complete',\n    },\n    editable: Boolean,\n    editIcon: {\n      type: String,\n      default: '$edit',\n    },\n    errorIcon: {\n      type: String,\n      default: '$error',\n    },\n    rules: {\n      type: Array,\n      default: () => [],\n    } as PropValidator<VuetifyStepperRuleValidator[]>,\n    step: [Number, String],\n  },\n\n  data () {\n    return {\n      isActive: false,\n      isInactive: true,\n    }\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        'v-stepper__step--active': this.isActive,\n        'v-stepper__step--editable': this.editable,\n        'v-stepper__step--inactive': this.isInactive,\n        'v-stepper__step--error error--text': this.hasError,\n        'v-stepper__step--complete': this.complete,\n      }\n    },\n    hasError (): boolean {\n      return this.rules.some(validate => validate() !== true)\n    },\n  },\n\n  mounted () {\n    this.stepper && this.stepper.register(this)\n  },\n\n  beforeDestroy () {\n    this.stepper && this.stepper.unregister(this)\n  },\n\n  methods: {\n    click (e: MouseEvent | KeyboardEvent) {\n      e.stopPropagation()\n\n      this.$emit('click', e)\n\n      if (this.editable) {\n        this.stepClick(this.step)\n      }\n    },\n    genIcon (icon: string) {\n      return this.$createElement(VIcon, icon)\n    },\n    genLabel () {\n      return this.$createElement('div', {\n        staticClass: 'v-stepper__label',\n      }, this.$slots.default)\n    },\n    genStep () {\n      const color = (!this.hasError && (this.complete || this.isActive)) ? this.color : false\n\n      return this.$createElement('span', this.setBackgroundColor(color, {\n        staticClass: 'v-stepper__step__step',\n      }), this.genStepContent())\n    },\n    genStepContent () {\n      const children = []\n\n      if (this.hasError) {\n        children.push(this.genIcon(this.errorIcon))\n      } else if (this.complete) {\n        if (this.editable) {\n          children.push(this.genIcon(this.editIcon))\n        } else {\n          children.push(this.genIcon(this.completeIcon))\n        }\n      } else {\n        children.push(String(this.step))\n      }\n\n      return children\n    },\n    keyboardClick (e: KeyboardEvent) {\n      if (e.keyCode === keyCodes.space) {\n        this.click(e)\n      }\n    },\n    toggle (step: number | string) {\n      this.isActive = step.toString() === this.step.toString()\n      this.isInactive = Number(step) < Number(this.step)\n    },\n  },\n\n  render (h): VNode {\n    return h('div', {\n      attrs: {\n        tabindex: this.editable ? 0 : -1,\n      },\n      staticClass: 'v-stepper__step',\n      class: this.classes,\n      directives: [{\n        name: 'ripple',\n        value: this.editable,\n      }],\n      on: {\n        click: this.click,\n        keydown: this.keyboardClick,\n      },\n    }, [\n      this.genStep(),\n      this.genLabel(),\n    ])\n  },\n})\n"],"mappings":"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"}

package/lib/components/VSwitch/VSwitch.mjs

@@ -10,8 +10,8 @@ import { LoaderSlot, useLoader } from "../../composables/loader.mjs";
 import { useFocus } from "../../composables/focus.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utility
 import { computed, ref } from 'vue';
-import { defineComponent, filterInputAttrs, getUid, useRender } from "../../util/index.mjs";
-export const VSwitch = defineComponent({
+import { filterInputAttrs, genericComponent, getUid, useRender } from "../../util/index.mjs"; // Types
+export const VSwitch = genericComponent()({
   name: 'VSwitch',
   inheritAttrs: false,
   props: {
@@ -61,8 +61,7 @@ export const VSwitch = defineComponent({
       const [controlProps, _2] = filterControlProps(props);
       const control = ref();
       function onClick() {
-        var _control$value, _control$value$input;
-        (_control$value = control.value) == null ? void 0 : (_control$value$input = _control$value.input) == null ? void 0 : _control$value$input.click();
+        control.value?.input?.click();
       }
       return _createVNode(VInput, _mergeProps({
         "class": ['v-switch', {

package/lib/components/VSwitch/VSwitch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSwitch.mjs","names":["filterControlProps","makeSelectionControlProps","VSelectionControl","filterInputProps","makeVInputProps","VInput","VProgressCircular","LoaderSlot","useLoader","useFocus","useProxiedModel","computed","ref","defineComponent","filterInputAttrs","getUid","useRender","VSwitch","name","inheritAttrs","props","indeterminate","Boolean","inset","flat","loading","type","String","default","emits","focused","val","setup","attrs","slots","model","loaderClasses","isFocused","focus","blur","loaderColor","color","uid","id","onChange","value","inputAttrs","controlAttrs","inputProps","_1","controlProps","_2","control","onClick","input","click","messagesId","isDisabled","isReadonly","isValid","undefined","textColorClasses","textColorStyles","slotProps","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { filterControlProps, makeSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\nimport { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\n\n// Composables\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useFocus } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utility\nimport { computed, ref } from 'vue'\nimport { defineComponent, filterInputAttrs, getUid, useRender } from '@/util'\n\nexport const VSwitch = defineComponent({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: {\n    indeterminate: Boolean,\n    inset: Boolean,\n    flat: Boolean,\n    loading: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    ...makeVInputProps(),\n    ...makeSelectionControlProps(),\n  },\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': () => true,\n    'update:indeterminate': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n    const { loaderClasses } = useLoader(props)\n    const { isFocused, focus, blur } = useFocus(props)\n\n    const loaderColor = computed(() => {\n      return typeof props.loading === 'string' && props.loading !== ''\n        ? props.loading\n        : props.color\n    })\n\n    const uid = getUid()\n    const id = computed(() => props.id || `switch-${uid}`)\n\n    function onChange () {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n\n    useRender(() => {\n      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const [inputProps, _1] = filterInputProps(props)\n      const [controlProps, _2] = filterControlProps(props)\n      const control = ref<VSelectionControl>()\n\n      function onClick () {\n        control.value?.input?.click()\n      }\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n          ]}\n          { ...inputAttrs }\n          { ...inputProps }\n          id={ id.value }\n          focused={ isFocused.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => (\n              <VSelectionControl\n                ref={ control }\n                { ...controlProps }\n                v-model={ model.value }\n                id={ id.value }\n                aria-describedby={ messagesId.value }\n                type=\"checkbox\"\n                onUpdate:modelValue={ onChange }\n                aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                onFocus={ focus }\n                onBlur={ blur }\n                { ...controlAttrs }\n              >\n                {{\n                  ...slots,\n                  default: () => (<div class=\"v-switch__track\" onClick={ onClick }></div>),\n                  input: ({ textColorClasses, textColorStyles }) => (\n                    <div\n                      class={[\n                        'v-switch__thumb',\n                        textColorClasses.value,\n                      ]}\n                      style={ textColorStyles.value }\n                    >\n                      { props.loading && (\n                        <LoaderSlot\n                          name=\"v-switch\"\n                          active\n                          color={ isValid.value === false ? undefined : loaderColor.value }\n                        >\n                          { slotProps => (\n                            slots.loader\n                              ? slots.loader(slotProps)\n                              : (\n                                  <VProgressCircular\n                                    active={ slotProps.isActive }\n                                    color={ slotProps.color }\n                                    indeterminate\n                                    size=\"16\"\n                                    width=\"2\"\n                                  />\n                              )\n                          )}\n                        </LoaderSlot>\n                      ) }\n                    </div>\n                  ),\n                }}\n              </VSelectionControl>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":"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"}
+{"version":3,"file":"VSwitch.mjs","names":["filterControlProps","makeSelectionControlProps","VSelectionControl","filterInputProps","makeVInputProps","VInput","VProgressCircular","LoaderSlot","useLoader","useFocus","useProxiedModel","computed","ref","filterInputAttrs","genericComponent","getUid","useRender","VSwitch","name","inheritAttrs","props","indeterminate","Boolean","inset","flat","loading","type","String","default","emits","focused","val","setup","attrs","slots","model","loaderClasses","isFocused","focus","blur","loaderColor","color","uid","id","onChange","value","inputAttrs","controlAttrs","inputProps","_1","controlProps","_2","control","onClick","input","click","messagesId","isDisabled","isReadonly","isValid","undefined","textColorClasses","textColorStyles","slotProps","loader","isActive"],"sources":["../../../src/components/VSwitch/VSwitch.tsx"],"sourcesContent":["// Styles\nimport './VSwitch.sass'\n\n// Components\nimport { filterControlProps, makeSelectionControlProps, VSelectionControl } from '@/components/VSelectionControl/VSelectionControl'\nimport { filterInputProps, makeVInputProps, VInput } from '@/components/VInput/VInput'\nimport { VProgressCircular } from '@/components/VProgressCircular'\n\n// Composables\nimport { LoaderSlot, useLoader } from '@/composables/loader'\nimport { useFocus } from '@/composables/focus'\nimport { useProxiedModel } from '@/composables/proxiedModel'\n\n// Utility\nimport { computed, ref } from 'vue'\nimport { filterInputAttrs, genericComponent, getUid, useRender } from '@/util'\n\n// Types\nimport type { VInputSlots } from '@/components/VInput/VInput'\nimport type { VSelectionControlSlots } from '@/components/VSelectionControl/VSelectionControl'\n\nexport type VSwitchSlots = VInputSlots & VSelectionControlSlots\n\nexport const VSwitch = genericComponent<VSwitchSlots>()({\n  name: 'VSwitch',\n\n  inheritAttrs: false,\n\n  props: {\n    indeterminate: Boolean,\n    inset: Boolean,\n    flat: Boolean,\n    loading: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    ...makeVInputProps(),\n    ...makeSelectionControlProps(),\n  },\n\n  emits: {\n    'update:focused': (focused: boolean) => true,\n    'update:modelValue': () => true,\n    'update:indeterminate': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const indeterminate = useProxiedModel(props, 'indeterminate')\n    const model = useProxiedModel(props, 'modelValue')\n    const { loaderClasses } = useLoader(props)\n    const { isFocused, focus, blur } = useFocus(props)\n\n    const loaderColor = computed(() => {\n      return typeof props.loading === 'string' && props.loading !== ''\n        ? props.loading\n        : props.color\n    })\n\n    const uid = getUid()\n    const id = computed(() => props.id || `switch-${uid}`)\n\n    function onChange () {\n      if (indeterminate.value) {\n        indeterminate.value = false\n      }\n    }\n\n    useRender(() => {\n      const [inputAttrs, controlAttrs] = filterInputAttrs(attrs)\n      const [inputProps, _1] = filterInputProps(props)\n      const [controlProps, _2] = filterControlProps(props)\n      const control = ref<VSelectionControl>()\n\n      function onClick () {\n        control.value?.input?.click()\n      }\n\n      return (\n        <VInput\n          class={[\n            'v-switch',\n            { 'v-switch--inset': props.inset },\n            { 'v-switch--indeterminate': indeterminate.value },\n            loaderClasses.value,\n          ]}\n          { ...inputAttrs }\n          { ...inputProps }\n          id={ id.value }\n          focused={ isFocused.value }\n        >\n          {{\n            ...slots,\n            default: ({\n              id,\n              messagesId,\n              isDisabled,\n              isReadonly,\n              isValid,\n            }) => (\n              <VSelectionControl\n                ref={ control }\n                { ...controlProps }\n                v-model={ model.value }\n                id={ id.value }\n                aria-describedby={ messagesId.value }\n                type=\"checkbox\"\n                onUpdate:modelValue={ onChange }\n                aria-checked={ indeterminate.value ? 'mixed' : undefined }\n                disabled={ isDisabled.value }\n                readonly={ isReadonly.value }\n                onFocus={ focus }\n                onBlur={ blur }\n                { ...controlAttrs }\n              >\n                {{\n                  ...slots,\n                  default: () => (<div class=\"v-switch__track\" onClick={ onClick }></div>),\n                  input: ({ textColorClasses, textColorStyles }) => (\n                    <div\n                      class={[\n                        'v-switch__thumb',\n                        textColorClasses.value,\n                      ]}\n                      style={ textColorStyles.value }\n                    >\n                      { props.loading && (\n                        <LoaderSlot\n                          name=\"v-switch\"\n                          active\n                          color={ isValid.value === false ? undefined : loaderColor.value }\n                        >\n                          { slotProps => (\n                            slots.loader\n                              ? slots.loader(slotProps)\n                              : (\n                                  <VProgressCircular\n                                    active={ slotProps.isActive }\n                                    color={ slotProps.color }\n                                    indeterminate\n                                    size=\"16\"\n                                    width=\"2\"\n                                  />\n                              )\n                          )}\n                        </LoaderSlot>\n                      ) }\n                    </div>\n                  ),\n                }}\n              </VSelectionControl>\n            ),\n          }}\n        </VInput>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSwitch = InstanceType<typeof VSwitch>\n"],"mappings":"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"}

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

@@ -1,163 +1,192 @@
 import * as vue from 'vue';
-import { PropType, JSXComponent } from 'vue';
+import { JSXComponent, PropType, WritableComputedRef, Ref, CSSProperties, ComputedRef } from 'vue';
+
+type Density = null | 'default' | 'comfortable' | 'compact';
+
+type IconValue = string | JSXComponent;
+declare const IconValue: PropType<IconValue>;
 
 declare function deepEqual(a: any, b: any): boolean;
-declare type EventProp<T = (...args: any[]) => any> = T | T[];
+type EventProp<T = (...args: any[]) => any> = T | T[];
 declare const EventProp: PropType<EventProp<(...args: any[]) => any>>;
 
-declare type ValidationResult = string | boolean;
-declare type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
+type SelectionControlSlot = {
+    model: WritableComputedRef<any>;
+    textColorClasses: Ref<string[]>;
+    textColorStyles: Ref<CSSProperties>;
+    props: {
+        onBlur: (e: Event) => void;
+        onFocus: (e: FocusEvent) => void;
+        id: string;
+    };
+};
 
-declare type IconValue = string | JSXComponent;
-declare const IconValue: PropType<IconValue>;
+type ValidationResult = string | boolean;
+type ValidationRule = ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
 
-declare type Density = null | 'default' | 'comfortable' | 'compact';
+interface VInputSlot {
+    id: ComputedRef<string>;
+    messagesId: ComputedRef<string>;
+    isDirty: ComputedRef<boolean>;
+    isDisabled: ComputedRef<boolean>;
+    isReadonly: ComputedRef<boolean>;
+    isPristine: Ref<boolean>;
+    isValid: ComputedRef<boolean | null>;
+    isValidating: Ref<boolean>;
+    reset: () => void;
+    resetValidation: () => void;
+    validate: () => void;
+}
 
 declare const VSwitch: vue.DefineComponent<{
-    density: {
-        type: vue.PropType<Density>;
-        default: string;
-        validator: (v: any) => boolean;
-    };
-    theme: StringConstructor;
-    color: StringConstructor;
-    disabled: BooleanConstructor;
-    error: BooleanConstructor;
-    id: StringConstructor;
-    inline: BooleanConstructor;
-    falseIcon: vue.PropType<IconValue>;
-    trueIcon: vue.PropType<IconValue>;
-    ripple: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    multiple: {
-        type: vue.PropType<boolean | null>;
-        default: null;
-    };
-    name: StringConstructor;
-    readonly: BooleanConstructor;
-    modelValue: null;
-    type: StringConstructor;
-    valueComparator: {
-        type: vue.PropType<typeof deepEqual>;
-        default: typeof deepEqual;
-    };
-    label: StringConstructor;
-    trueValue: null;
-    falseValue: null;
-    value: null;
-    focused: BooleanConstructor;
-    errorMessages: {
-        type: vue.PropType<string | string[]>;
-        default: () => never[];
-    };
-    maxErrors: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    rules: {
-        type: vue.PropType<ValidationRule[]>;
-        default: () => never[];
-    };
-    validateOn: vue.PropType<"input" | "blur" | "submit" | undefined>;
-    validationValue: null;
-    appendIcon: vue.PropType<IconValue>;
-    prependIcon: vue.PropType<IconValue>;
-    hideDetails: vue.PropType<boolean | "auto">;
-    messages: {
-        type: vue.PropType<string | string[]>;
-        default: () => never[];
-    };
-    direction: {
-        type: vue.PropType<"horizontal" | "vertical">;
-        default: string;
-        validator: (v: any) => boolean;
-    };
-    'onClick:prepend': vue.PropType<EventProp<(...args: any[]) => any>>;
-    'onClick:append': vue.PropType<EventProp<(...args: any[]) => any>>;
-    indeterminate: BooleanConstructor;
-    inset: BooleanConstructor;
-    flat: BooleanConstructor;
-    loading: {
-        type: (StringConstructor | BooleanConstructor)[];
-        default: boolean;
-    };
+    flat: boolean;
+    inline: boolean;
+    error: boolean;
+    direction: "horizontal" | "vertical";
+    inset: boolean;
+    loading: string | boolean;
+    disabled: boolean;
+    multiple: boolean | null;
+    readonly: boolean;
+    indeterminate: boolean;
+    messages: string | string[];
+    density: Density;
+    ripple: boolean;
+    focused: boolean;
+    errorMessages: string | string[];
+    maxErrors: string | number;
+    rules: ValidationRule[];
+    valueComparator: typeof deepEqual;
+} & {
+    type?: string | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    color?: string | undefined;
+    value?: any;
+    label?: string | undefined;
+    theme?: string | undefined;
+    modelValue?: any;
+    prependIcon?: IconValue | undefined;
+    appendIcon?: IconValue | undefined;
+    'onClick:append'?: EventProp<(...args: any[]) => any> | undefined;
+    'onClick:prepend'?: EventProp<(...args: any[]) => any> | undefined;
+    validateOn?: "input" | "blur" | "submit" | undefined;
+    validationValue?: any;
+    hideDetails?: boolean | "auto" | undefined;
+    falseIcon?: IconValue | undefined;
+    trueIcon?: IconValue | undefined;
+    trueValue?: any;
+    falseValue?: any;
+} & {
+    $children?: {} | vue.VNodeChild | {
+        default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        label?: ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    };
+    'v-slots'?: {
+        default?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        label?: false | ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:default"?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+    "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:label"?: false | ((args_0: {
+        label: string | undefined;
+        props: Record<string, unknown>;
+    }) => vue.VNodeChild) | undefined;
+    "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
 }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-    'update:focused': (focused: boolean) => true;
-    'update:modelValue': () => true;
-    'update:indeterminate': (val: boolean) => true;
-}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
-    density: {
-        type: vue.PropType<Density>;
-        default: string;
-        validator: (v: any) => boolean;
-    };
-    theme: StringConstructor;
-    color: StringConstructor;
-    disabled: BooleanConstructor;
-    error: BooleanConstructor;
-    id: StringConstructor;
-    inline: BooleanConstructor;
-    falseIcon: vue.PropType<IconValue>;
-    trueIcon: vue.PropType<IconValue>;
-    ripple: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    multiple: {
-        type: vue.PropType<boolean | null>;
-        default: null;
-    };
-    name: StringConstructor;
-    readonly: BooleanConstructor;
-    modelValue: null;
-    type: StringConstructor;
-    valueComparator: {
-        type: vue.PropType<typeof deepEqual>;
-        default: typeof deepEqual;
-    };
-    label: StringConstructor;
-    trueValue: null;
-    falseValue: null;
-    value: null;
-    focused: BooleanConstructor;
-    errorMessages: {
-        type: vue.PropType<string | string[]>;
-        default: () => never[];
-    };
-    maxErrors: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    rules: {
-        type: vue.PropType<ValidationRule[]>;
-        default: () => never[];
-    };
-    validateOn: vue.PropType<"input" | "blur" | "submit" | undefined>;
-    validationValue: null;
-    appendIcon: vue.PropType<IconValue>;
-    prependIcon: vue.PropType<IconValue>;
-    hideDetails: vue.PropType<boolean | "auto">;
-    messages: {
-        type: vue.PropType<string | string[]>;
-        default: () => never[];
-    };
-    direction: {
-        type: vue.PropType<"horizontal" | "vertical">;
-        default: string;
-        validator: (v: any) => boolean;
-    };
-    'onClick:prepend': vue.PropType<EventProp<(...args: any[]) => any>>;
-    'onClick:append': vue.PropType<EventProp<(...args: any[]) => any>>;
-    indeterminate: BooleanConstructor;
-    inset: BooleanConstructor;
-    flat: BooleanConstructor;
-    loading: {
-        type: (StringConstructor | BooleanConstructor)[];
-        default: boolean;
-    };
-}>> & {
+    'update:focused': (focused: boolean) => boolean;
+    'update:modelValue': () => boolean;
+    'update:indeterminate': (val: boolean) => boolean;
+}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
+    flat: boolean;
+    inline: boolean;
+    error: boolean;
+    direction: "horizontal" | "vertical";
+    inset: boolean;
+    loading: string | boolean;
+    disabled: boolean;
+    multiple: boolean | null;
+    readonly: boolean;
+    indeterminate: boolean;
+    messages: string | string[];
+    density: Density;
+    ripple: boolean;
+    focused: boolean;
+    errorMessages: string | string[];
+    maxErrors: string | number;
+    rules: ValidationRule[];
+    valueComparator: typeof deepEqual;
+} & {
+    type?: string | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    color?: string | undefined;
+    value?: any;
+    label?: string | undefined;
+    theme?: string | undefined;
+    modelValue?: any;
+    prependIcon?: IconValue | undefined;
+    appendIcon?: IconValue | undefined;
+    'onClick:append'?: EventProp<(...args: any[]) => any> | undefined;
+    'onClick:prepend'?: EventProp<(...args: any[]) => any> | undefined;
+    validateOn?: "input" | "blur" | "submit" | undefined;
+    validationValue?: any;
+    hideDetails?: boolean | "auto" | undefined;
+    falseIcon?: IconValue | undefined;
+    trueIcon?: IconValue | undefined;
+    trueValue?: any;
+    falseValue?: any;
+} & {
+    $children?: {} | vue.VNodeChild | {
+        default?: (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        prepend?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        append?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        details?: ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        label?: ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    };
+    'v-slots'?: {
+        default?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+        prepend?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        append?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        details?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+        label?: false | ((args_0: {
+            label: string | undefined;
+            props: Record<string, unknown>;
+        }) => vue.VNodeChild) | undefined;
+        input?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:default"?: false | (((args_0: VInputSlot) => vue.VNodeChild) & (() => vue.VNodeChild)) | undefined;
+    "v-slot:prepend"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:append"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:details"?: false | ((args_0: VInputSlot) => vue.VNodeChild) | undefined;
+    "v-slot:label"?: false | ((args_0: {
+        label: string | undefined;
+        props: Record<string, unknown>;
+    }) => vue.VNodeChild) | undefined;
+    "v-slot:input"?: false | ((args_0: SelectionControlSlot) => vue.VNodeChild) | undefined;
+} & {
     "onUpdate:modelValue"?: (() => any) | undefined;
     "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
     "onUpdate:indeterminate"?: ((val: boolean) => any) | undefined;
@@ -181,6 +210,6 @@ declare const VSwitch: vue.DefineComponent<{
     rules: ValidationRule[];
     valueComparator: typeof deepEqual;
 }>;
-declare type VSwitch = InstanceType<typeof VSwitch>;
+type VSwitch = InstanceType<typeof VSwitch>;
 
 export { VSwitch };

package/lib/components/VSystemBar/VSystemBar.mjs

@@ -8,10 +8,11 @@ import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
-import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
+import { useBackgroundColor } from "../../composables/color.mjs";
+import { useSsrBoot } from "../../composables/ssrBoot.mjs"; // Utilities
 import { computed, ref, toRef } from 'vue';
-import { defineComponent, useRender } from "../../util/index.mjs";
-export const VSystemBar = defineComponent({
+import { genericComponent, useRender } from "../../util/index.mjs";
+export const VSystemBar = genericComponent()({
   name: 'VSystemBar',
   props: {
     color: String,
@@ -40,6 +41,9 @@ export const VSystemBar = defineComponent({
     const {
       roundedClasses
     } = useRounded(props);
+    const {
+      ssrBootStyles
+    } = useSsrBoot();
     const height = computed(() => props.height ?? (props.window ? 32 : 24));
     const {
       layoutItemStyles
@@ -56,7 +60,7 @@ export const VSystemBar = defineComponent({
       "class": ['v-system-bar', {
         'v-system-bar--window': props.window
       }, themeClasses.value, backgroundColorClasses.value, elevationClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles.value, layoutItemStyles.value]
+      "style": [backgroundColorStyles.value, layoutItemStyles.value, ssrBootStyles.value]
     }, slots));
     return {};
   }

package/lib/components/VSystemBar/VSystemBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSystemBar.mjs","names":["makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useBackgroundColor","computed","ref","toRef","defineComponent","useRender","VSystemBar","name","props","color","String","height","Number","window","Boolean","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","roundedClasses","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","active","absolute","value"],"sources":["../../../src/components/VSystemBar/VSystemBar.tsx"],"sourcesContent":["// Styles\nimport './VSystemBar.sass'\n\n// Composables\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { defineComponent, useRender } from '@/util'\n\nexport const VSystemBar = defineComponent({\n  name: 'VSystemBar',\n\n  props: {\n    color: String,\n    height: [Number, String],\n    window: Boolean,\n\n    ...makeElevationProps(),\n    ...makeLayoutItemProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const height = computed(() => props.height ?? (props.window ? 32 : 24))\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: ref('top'),\n      layoutSize: height,\n      elementSize: height,\n      active: computed(() => true),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-system-bar',\n          { 'v-system-bar--window': props.window },\n          themeClasses.value,\n          backgroundColorClasses.value,\n          elevationClasses.value,\n          roundedClasses.value,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          layoutItemStyles.value,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VSystemBar = InstanceType<typeof VSystemBar>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,mBAAmB,EAAEC,aAAa;AAAA,SAClCC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,kBAAkB,uCAE3B;AACA,SAASC,QAAQ,EAAEC,GAAG,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACjCC,eAAe,EAAEC,SAAS;AAEnC,OAAO,MAAMC,UAAU,GAAGF,eAAe,CAAC;EACxCG,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAE;IACLC,KAAK,EAAEC,MAAM;IACbC,MAAM,EAAE,CAACC,MAAM,EAAEF,MAAM,CAAC;IACxBG,MAAM,EAAEC,OAAO;IAEf,GAAGvB,kBAAkB,EAAE;IACvB,GAAGE,mBAAmB,EAAE;IACxB,GAAGE,gBAAgB,EAAE;IACrB,GAAGE,YAAY,EAAE;IACjB,GAAGC,cAAc;EACnB,CAAC;EAEDiB,KAAK,CAAEP,KAAK,QAAa;IAAA,IAAX;MAAEQ;IAAM,CAAC;IACrB,MAAM;MAAEC;IAAa,CAAC,GAAGlB,YAAY,CAACS,KAAK,CAAC;IAC5C,MAAM;MAAEU,sBAAsB;MAAEC;IAAsB,CAAC,GAAGnB,kBAAkB,CAACG,KAAK,CAACK,KAAK,EAAE,OAAO,CAAC,CAAC;IACnG,MAAM;MAAEY;IAAiB,CAAC,GAAG5B,YAAY,CAACgB,KAAK,CAAC;IAChD,MAAM;MAAEa;IAAe,CAAC,GAAGzB,UAAU,CAACY,KAAK,CAAC;IAC5C,MAAMG,MAAM,GAAGV,QAAQ,CAAC,MAAMO,KAAK,CAACG,MAAM,KAAKH,KAAK,CAACK,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;IACvE,MAAM;MAAES;IAAiB,CAAC,GAAG5B,aAAa,CAAC;MACzC6B,EAAE,EAAEf,KAAK,CAACD,IAAI;MACdiB,KAAK,EAAEvB,QAAQ,CAAC,MAAMwB,QAAQ,CAACjB,KAAK,CAACgB,KAAK,EAAE,EAAE,CAAC,CAAC;MAChDE,QAAQ,EAAExB,GAAG,CAAC,KAAK,CAAC;MACpByB,UAAU,EAAEhB,MAAM;MAClBiB,WAAW,EAAEjB,MAAM;MACnBkB,MAAM,EAAE5B,QAAQ,CAAC,MAAM,IAAI,CAAC;MAC5B6B,QAAQ,EAAE3B,KAAK,CAACK,KAAK,EAAE,UAAU;IACnC,CAAC,CAAC;IAEFH,SAAS,CAAC;MAAA,SAEC,CACL,cAAc,EACd;QAAE,sBAAsB,EAAEG,KAAK,CAACK;MAAO,CAAC,EACxCI,YAAY,CAACc,KAAK,EAClBb,sBAAsB,CAACa,KAAK,EAC5BX,gBAAgB,CAACW,KAAK,EACtBV,cAAc,CAACU,KAAK,CACrB;MAAA,SACM,CACLZ,qBAAqB,CAACY,KAAK,EAC3BT,gBAAgB,CAACS,KAAK;IACvB,GACSf,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VSystemBar.mjs","names":["makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useBackgroundColor","useSsrBoot","computed","ref","toRef","genericComponent","useRender","VSystemBar","name","props","color","String","height","Number","window","Boolean","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","roundedClasses","ssrBootStyles","layoutItemStyles","id","order","parseInt","position","layoutSize","elementSize","active","absolute","value"],"sources":["../../../src/components/VSystemBar/VSystemBar.tsx"],"sourcesContent":["// Styles\nimport './VSystemBar.sass'\n\n// Composables\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useSsrBoot } from '@/composables/ssrBoot'\n\n// Utilities\nimport { computed, ref, toRef } from 'vue'\nimport { genericComponent, useRender } from '@/util'\n\nexport const VSystemBar = genericComponent()({\n  name: 'VSystemBar',\n\n  props: {\n    color: String,\n    height: [Number, String],\n    window: Boolean,\n\n    ...makeElevationProps(),\n    ...makeLayoutItemProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  },\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n    const { ssrBootStyles } = useSsrBoot()\n    const height = computed(() => props.height ?? (props.window ? 32 : 24))\n    const { layoutItemStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: ref('top'),\n      layoutSize: height,\n      elementSize: height,\n      active: computed(() => true),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    useRender(() => (\n      <props.tag\n        class={[\n          'v-system-bar',\n          { 'v-system-bar--window': props.window },\n          themeClasses.value,\n          backgroundColorClasses.value,\n          elevationClasses.value,\n          roundedClasses.value,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          layoutItemStyles.value,\n          ssrBootStyles.value,\n        ]}\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VSystemBar = InstanceType<typeof VSystemBar>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,mBAAmB,EAAEC,aAAa;AAAA,SAClCC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,kBAAkB;AAAA,SAClBC,UAAU,yCAEnB;AACA,SAASC,QAAQ,EAAEC,GAAG,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACjCC,gBAAgB,EAAEC,SAAS;AAEpC,OAAO,MAAMC,UAAU,GAAGF,gBAAgB,EAAE,CAAC;EAC3CG,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAE;IACLC,KAAK,EAAEC,MAAM;IACbC,MAAM,EAAE,CAACC,MAAM,EAAEF,MAAM,CAAC;IACxBG,MAAM,EAAEC,OAAO;IAEf,GAAGxB,kBAAkB,EAAE;IACvB,GAAGE,mBAAmB,EAAE;IACxB,GAAGE,gBAAgB,EAAE;IACrB,GAAGE,YAAY,EAAE;IACjB,GAAGC,cAAc;EACnB,CAAC;EAEDkB,KAAK,CAAEP,KAAK,QAAa;IAAA,IAAX;MAAEQ;IAAM,CAAC;IACrB,MAAM;MAAEC;IAAa,CAAC,GAAGnB,YAAY,CAACU,KAAK,CAAC;IAC5C,MAAM;MAAEU,sBAAsB;MAAEC;IAAsB,CAAC,GAAGpB,kBAAkB,CAACI,KAAK,CAACK,KAAK,EAAE,OAAO,CAAC,CAAC;IACnG,MAAM;MAAEY;IAAiB,CAAC,GAAG7B,YAAY,CAACiB,KAAK,CAAC;IAChD,MAAM;MAAEa;IAAe,CAAC,GAAG1B,UAAU,CAACa,KAAK,CAAC;IAC5C,MAAM;MAAEc;IAAc,CAAC,GAAGtB,UAAU,EAAE;IACtC,MAAMW,MAAM,GAAGV,QAAQ,CAAC,MAAMO,KAAK,CAACG,MAAM,KAAKH,KAAK,CAACK,MAAM,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;IACvE,MAAM;MAAEU;IAAiB,CAAC,GAAG9B,aAAa,CAAC;MACzC+B,EAAE,EAAEhB,KAAK,CAACD,IAAI;MACdkB,KAAK,EAAExB,QAAQ,CAAC,MAAMyB,QAAQ,CAAClB,KAAK,CAACiB,KAAK,EAAE,EAAE,CAAC,CAAC;MAChDE,QAAQ,EAAEzB,GAAG,CAAC,KAAK,CAAC;MACpB0B,UAAU,EAAEjB,MAAM;MAClBkB,WAAW,EAAElB,MAAM;MACnBmB,MAAM,EAAE7B,QAAQ,CAAC,MAAM,IAAI,CAAC;MAC5B8B,QAAQ,EAAE5B,KAAK,CAACK,KAAK,EAAE,UAAU;IACnC,CAAC,CAAC;IAEFH,SAAS,CAAC;MAAA,SAEC,CACL,cAAc,EACd;QAAE,sBAAsB,EAAEG,KAAK,CAACK;MAAO,CAAC,EACxCI,YAAY,CAACe,KAAK,EAClBd,sBAAsB,CAACc,KAAK,EAC5BZ,gBAAgB,CAACY,KAAK,EACtBX,cAAc,CAACW,KAAK,CACrB;MAAA,SACM,CACLb,qBAAqB,CAACa,KAAK,EAC3BT,gBAAgB,CAACS,KAAK,EACtBV,aAAa,CAACU,KAAK;IACpB,GACShB,KAAK,CAElB,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}