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

package/lib/components/VSelectionControl/VSelectionControl.mjs

@@ -0,0 +1,211 @@
+import { resolveDirective as _resolveDirective, withDirectives as _withDirectives, mergeProps as _mergeProps, vModelDynamic as _vModelDynamic, createVNode as _createVNode } from "vue";
+// Styles
+import "./VSelectionControl.css"; // Components
+
+import { VIcon } from "../VIcon/index.mjs";
+import { VLabel } from "../VLabel/index.mjs";
+import { VSelectionControlGroupSymbol } from "../VSelectionControlGroup/VSelectionControlGroup.mjs"; // Composables
+
+import { makeDensityProps, useDensity } from "../../composables/density.mjs";
+import { makeThemeProps } from "../../composables/theme.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
+import { useTextColor } from "../../composables/color.mjs";
+import { IconValue } from "../../composables/icons.mjs"; // Directives
+
+import { Ripple } from "../../directives/ripple/index.mjs"; // Utilities
+
+import { computed, inject, ref } from 'vue';
+import { deepEqual, genericComponent, getUid, pick, propsFactory, SUPPORTS_FOCUS_VISIBLE, useRender, wrapInArray } from "../../util/index.mjs"; // Types
+
+export const makeSelectionControlProps = propsFactory({
+  color: String,
+  disabled: Boolean,
+  error: Boolean,
+  id: String,
+  inline: Boolean,
+  label: String,
+  falseIcon: IconValue,
+  trueIcon: IconValue,
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  multiple: {
+    type: Boolean,
+    default: null
+  },
+  name: String,
+  readonly: Boolean,
+  trueValue: null,
+  falseValue: null,
+  modelValue: null,
+  type: String,
+  value: null,
+  valueComparator: {
+    type: Function,
+    default: deepEqual
+  },
+  ...makeThemeProps(),
+  ...makeDensityProps()
+});
+export function useSelectionControl(props) {
+  const group = inject(VSelectionControlGroupSymbol, undefined);
+  const {
+    densityClasses
+  } = useDensity(props);
+  const modelValue = useProxiedModel(props, 'modelValue');
+  const trueValue = computed(() => props.trueValue !== undefined ? props.trueValue : props.value !== undefined ? props.value : true);
+  const falseValue = computed(() => props.falseValue !== undefined ? props.falseValue : false);
+  const isMultiple = computed(() => (group == null ? void 0 : group.multiple.value) || !!props.multiple || props.multiple == null && Array.isArray(modelValue.value));
+  const model = computed({
+    get() {
+      const val = group ? group.modelValue.value : modelValue.value;
+      return isMultiple.value ? val.some(v => props.valueComparator(v, trueValue.value)) : props.valueComparator(val, trueValue.value);
+    },
+
+    set(val) {
+      if (props.readonly) return;
+      const currentValue = val ? trueValue.value : falseValue.value;
+      let newVal = currentValue;
+
+      if (isMultiple.value) {
+        newVal = val ? [...wrapInArray(modelValue.value), currentValue] : wrapInArray(modelValue.value).filter(item => !props.valueComparator(item, trueValue.value));
+      }
+
+      if (group) {
+        group.modelValue.value = newVal;
+      } else {
+        modelValue.value = newVal;
+      }
+    }
+
+  });
+  const {
+    textColorClasses,
+    textColorStyles
+  } = useTextColor(computed(() => {
+    return model.value && !props.error && !props.disabled ? props.color : undefined;
+  }));
+  const icon = computed(() => {
+    var _group$trueIcon$value, _group$falseIcon$valu;
+
+    return model.value ? (_group$trueIcon$value = group == null ? void 0 : group.trueIcon.value) != null ? _group$trueIcon$value : props.trueIcon : (_group$falseIcon$valu = group == null ? void 0 : group.falseIcon.value) != null ? _group$falseIcon$valu : props.falseIcon;
+  });
+  return {
+    group,
+    densityClasses,
+    trueValue,
+    falseValue,
+    model,
+    textColorClasses,
+    textColorStyles,
+    icon
+  };
+}
+export const VSelectionControl = genericComponent()({
+  name: 'VSelectionControl',
+  directives: {
+    Ripple
+  },
+  inheritAttrs: false,
+  props: makeSelectionControlProps(),
+  emits: {
+    'update:modelValue': val => true
+  },
+
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
+    const {
+      densityClasses,
+      group,
+      icon,
+      model,
+      textColorClasses,
+      textColorStyles,
+      trueValue
+    } = useSelectionControl(props);
+    const uid = getUid();
+    const id = computed(() => props.id || `input-${uid}`);
+    const isFocused = ref(false);
+    const isFocusVisible = ref(false);
+    const input = ref();
+
+    function onFocus(e) {
+      isFocused.value = true;
+
+      if (!SUPPORTS_FOCUS_VISIBLE || SUPPORTS_FOCUS_VISIBLE && e.target.matches(':focus-visible')) {
+        isFocusVisible.value = true;
+      }
+    }
+
+    function onBlur() {
+      isFocused.value = false;
+      isFocusVisible.value = false;
+    }
+
+    useRender(() => {
+      var _group$type$value, _slots$default, _group$name$value, _slots$input;
+
+      const label = slots.label ? slots.label({
+        label: props.label,
+        props: {
+          for: id.value
+        }
+      }) : props.label;
+      const type = (_group$type$value = group == null ? void 0 : group.type.value) != null ? _group$type$value : props.type;
+      return _createVNode("div", {
+        "class": ['v-selection-control', {
+          'v-selection-control--dirty': model.value,
+          'v-selection-control--disabled': props.disabled,
+          'v-selection-control--error': props.error,
+          'v-selection-control--focused': isFocused.value,
+          'v-selection-control--focus-visible': isFocusVisible.value,
+          'v-selection-control--inline': (group == null ? void 0 : group.inline.value) || props.inline
+        }, densityClasses.value]
+      }, [_createVNode("div", {
+        "class": ['v-selection-control__wrapper', textColorClasses.value],
+        "style": textColorStyles.value
+      }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), _withDirectives(_createVNode("div", {
+        "class": ['v-selection-control__input']
+      }, [icon.value && _createVNode(VIcon, {
+        "icon": icon.value
+      }, null), _withDirectives(_createVNode("input", _mergeProps({
+        "onUpdate:modelValue": $event => model.value = $event,
+        "ref": input,
+        "disabled": props.disabled,
+        "id": id.value,
+        "onBlur": onBlur,
+        "onFocus": onFocus,
+        "aria-readonly": props.readonly,
+        "type": type,
+        "value": trueValue.value,
+        "name": (_group$name$value = group == null ? void 0 : group.name.value) != null ? _group$name$value : props.name,
+        "aria-checked": type === 'checkbox' ? model.value : undefined
+      }, attrs), null), [[_vModelDynamic, model.value]]), (_slots$input = slots.input) == null ? void 0 : _slots$input.call(slots, {
+        model,
+        textColorClasses,
+        props: {
+          onFocus,
+          onBlur,
+          id: id.value
+        }
+      })]), [[_resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), _createVNode(VLabel, {
+        "for": id.value
+      }, {
+        default: () => [label]
+      })]);
+    });
+    return {
+      isFocused,
+      input
+    };
+  }
+
+});
+export function filterControlProps(props) {
+  return pick(props, Object.keys(VSelectionControl.props));
+}
+//# sourceMappingURL=VSelectionControl.mjs.map

package/lib/components/VSelectionControl/VSelectionControl.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VSelectionControl.mjs","names":["VIcon","VLabel","VSelectionControlGroupSymbol","makeDensityProps","useDensity","makeThemeProps","useProxiedModel","useTextColor","IconValue","Ripple","computed","inject","ref","deepEqual","genericComponent","getUid","pick","propsFactory","SUPPORTS_FOCUS_VISIBLE","useRender","wrapInArray","makeSelectionControlProps","color","String","disabled","Boolean","error","id","inline","label","falseIcon","trueIcon","ripple","type","default","multiple","name","readonly","trueValue","falseValue","modelValue","value","valueComparator","Function","useSelectionControl","props","group","undefined","densityClasses","isMultiple","Array","isArray","model","get","val","some","v","set","currentValue","newVal","filter","item","textColorClasses","textColorStyles","icon","VSelectionControl","directives","inheritAttrs","emits","setup","attrs","slots","uid","isFocused","isFocusVisible","input","onFocus","e","target","matches","onBlur","for","filterControlProps","Object","keys"],"sources":["../../../src/components/VSelectionControl/VSelectionControl.tsx"],"sourcesContent":["// Styles\nimport './VSelectionControl.sass'\n\n// Components\nimport { VIcon } from '@/components/VIcon'\nimport { VLabel } from '@/components/VLabel'\nimport { VSelectionControlGroupSymbol } from '@/components/VSelectionControlGroup/VSelectionControlGroup'\n\n// Composables\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeThemeProps } from '@/composables/theme'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useTextColor } from '@/composables/color'\nimport { IconValue } from '@/composables/icons'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed, inject, ref } from 'vue'\nimport {\n  deepEqual,\n  genericComponent,\n  getUid,\n  pick,\n  propsFactory,\n  SUPPORTS_FOCUS_VISIBLE,\n  useRender,\n  wrapInArray,\n} from '@/util'\n\n// Types\nimport type { ComputedRef, ExtractPropTypes, PropType, Ref, WritableComputedRef } from 'vue'\nimport type { MakeSlots } from '@/util'\n\nexport type SelectionControlSlot = {\n  model: WritableComputedRef<any>\n  isReadonly: ComputedRef<boolean>\n  isDisabled: ComputedRef<boolean>\n  textColorClasses: Ref<string[]>\n  props: {\n    onBlur: (e: Event) => void\n    onFocus: (e: FocusEvent) => void\n    id: string\n  }\n}\n\nexport const makeSelectionControlProps = propsFactory({\n  color: String,\n  disabled: Boolean,\n  error: Boolean,\n  id: String,\n  inline: Boolean,\n  label: String,\n  falseIcon: IconValue,\n  trueIcon: IconValue,\n  ripple: {\n    type: Boolean,\n    default: true,\n  },\n  multiple: {\n    type: Boolean as PropType<boolean | null>,\n    default: null,\n  },\n  name: String,\n  readonly: Boolean,\n  trueValue: null,\n  falseValue: null,\n  modelValue: null,\n  type: String,\n  value: null,\n  valueComparator: {\n    type: Function as PropType<typeof deepEqual>,\n    default: deepEqual,\n  },\n\n  ...makeThemeProps(),\n  ...makeDensityProps(),\n})\n\nexport function useSelectionControl (\n  props: ExtractPropTypes<ReturnType<typeof makeSelectionControlProps>> & {\n    'onUpdate:modelValue': ((val: any) => void) | undefined\n  }\n) {\n  const group = inject(VSelectionControlGroupSymbol, undefined)\n  const { densityClasses } = useDensity(props)\n  const modelValue = useProxiedModel(props, 'modelValue')\n  const trueValue = computed(() => (\n    props.trueValue !== undefined ? props.trueValue\n    : props.value !== undefined ? props.value\n    : true\n  ))\n  const falseValue = computed(() => props.falseValue !== undefined ? props.falseValue : false)\n  const isMultiple = computed(() => (\n    group?.multiple.value ||\n    !!props.multiple ||\n    (props.multiple == null && Array.isArray(modelValue.value))\n  ))\n  const model = computed({\n    get () {\n      const val = group ? group.modelValue.value : modelValue.value\n\n      return isMultiple.value\n        ? val.some((v: any) => props.valueComparator(v, trueValue.value))\n        : props.valueComparator(val, trueValue.value)\n    },\n    set (val: boolean) {\n      if (props.readonly) return\n\n      const currentValue = val ? trueValue.value : falseValue.value\n\n      let newVal = currentValue\n\n      if (isMultiple.value) {\n        newVal = val\n          ? [...wrapInArray(modelValue.value), currentValue]\n          : wrapInArray(modelValue.value).filter((item: any) => !props.valueComparator(item, trueValue.value))\n      }\n\n      if (group) {\n        group.modelValue.value = newVal\n      } else {\n        modelValue.value = newVal\n      }\n    },\n  })\n  const { textColorClasses, textColorStyles } = useTextColor(computed(() => {\n    return (\n      model.value &&\n      !props.error &&\n      !props.disabled\n    ) ? props.color : undefined\n  }))\n  const icon = computed(() => {\n    return model.value\n      ? group?.trueIcon.value ?? props.trueIcon\n      : group?.falseIcon.value ?? props.falseIcon\n  })\n\n  return {\n    group,\n    densityClasses,\n    trueValue,\n    falseValue,\n    model,\n    textColorClasses,\n    textColorStyles,\n    icon,\n  }\n}\n\nexport const VSelectionControl = genericComponent<new <T>() => {\n  $props: {\n    modelValue?: T\n    'onUpdate:modelValue'?: (val: T) => any\n  }\n  $slots: MakeSlots<{\n    default: []\n    input: [SelectionControlSlot]\n  }>\n}>()({\n  name: 'VSelectionControl',\n\n  directives: { Ripple },\n\n  inheritAttrs: false,\n\n  props: makeSelectionControlProps(),\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const {\n      densityClasses,\n      group,\n      icon,\n      model,\n      textColorClasses,\n      textColorStyles,\n      trueValue,\n    } = useSelectionControl(props)\n    const uid = getUid()\n    const id = computed(() => props.id || `input-${uid}`)\n    const isFocused = ref(false)\n    const isFocusVisible = ref(false)\n    const input = ref<HTMLInputElement>()\n\n    function onFocus (e: FocusEvent) {\n      isFocused.value = true\n      if (\n        !SUPPORTS_FOCUS_VISIBLE ||\n        (SUPPORTS_FOCUS_VISIBLE && (e.target as HTMLElement).matches(':focus-visible'))\n      ) {\n        isFocusVisible.value = true\n      }\n    }\n\n    function onBlur () {\n      isFocused.value = false\n      isFocusVisible.value = false\n    }\n\n    useRender(() => {\n      const label = slots.label\n        ? slots.label({\n          label: props.label,\n          props: { for: id.value },\n        })\n        : props.label\n      const type = group?.type.value ?? props.type\n\n      return (\n        <div\n          class={[\n            'v-selection-control',\n            {\n              'v-selection-control--dirty': model.value,\n              'v-selection-control--disabled': props.disabled,\n              'v-selection-control--error': props.error,\n              'v-selection-control--focused': isFocused.value,\n              'v-selection-control--focus-visible': isFocusVisible.value,\n              'v-selection-control--inline': group?.inline.value || props.inline,\n            },\n            densityClasses.value,\n          ]}\n        >\n          <div\n            class={[\n              'v-selection-control__wrapper',\n              textColorClasses.value,\n            ]}\n            style={ textColorStyles.value }\n          >\n            { slots.default?.() }\n\n            <div\n              class={[\n                'v-selection-control__input',\n              ]}\n              v-ripple={ props.ripple && [\n                !props.disabled && !props.readonly,\n                null,\n                ['center', 'circle'],\n              ]}\n            >\n              { icon.value && <VIcon icon={ icon.value } /> }\n\n              <input\n                v-model={ model.value }\n                ref={ input }\n                disabled={ props.disabled }\n                id={ id.value }\n                onBlur={ onBlur }\n                onFocus={ onFocus }\n                aria-readonly={ props.readonly }\n                type={ type }\n                value={ trueValue.value }\n                name={ group?.name.value ?? props.name }\n                aria-checked={ type === 'checkbox' ? model.value : undefined }\n                { ...attrs }\n              />\n\n              { slots.input?.({\n                model,\n                textColorClasses,\n                props: {\n                  onFocus,\n                  onBlur,\n                  id: id.value,\n                },\n              }) }\n            </div>\n          </div>\n\n          <VLabel for={ id.value }>\n            { label }\n          </VLabel>\n        </div>\n      )\n    })\n\n    return {\n      isFocused,\n      input,\n    }\n  },\n})\n\nexport type VSelectionControl = InstanceType<typeof VSelectionControl>\n\nexport function filterControlProps (props: ExtractPropTypes<ReturnType<typeof makeSelectionControlProps>>) {\n  return pick(props, Object.keys(VSelectionControl.props) as any)\n}\n"],"mappings":"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"}

package/lib/components/VSelectionControl/VSelectionControl.sass

@@ -0,0 +1,96 @@
+@forward './variables'
+@use 'sass:map'
+@use 'sass:list'
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+.v-selection-control
+  align-items: center
+  contain: layout
+  display: flex
+  flex: 1 0
+  grid-area: control
+  position: relative
+  user-select: none
+
+  .v-label
+    height: 100%
+    width: 100%
+
+  &--disabled
+    opacity: var(--v-disabled-opacity)
+    pointer-events: none
+
+  &--error,
+  &--disabled
+    .v-label
+      opacity: 1
+
+  &--error:not(.v-selection-control--disabled)
+    .v-label
+      color: rgb(var(--v-theme-error))
+
+  &--inline
+    display: inline-flex
+
+    .v-label
+      width: auto
+
+  @at-root
+    @include tools.density('v-selection-control', $selection-control-density) using ($modifier)
+      --v-selection-control-size: #{$selection-control-size + $modifier}
+
+.v-selection-control__wrapper
+  width: var(--v-selection-control-size)
+  height: var(--v-selection-control-size)
+  display: inline-flex
+  align-items: center
+  position: relative
+  justify-content: center
+  flex: none
+
+.v-selection-control__input
+  width: var(--v-selection-control-size)
+  height: var(--v-selection-control-size)
+  align-items: center
+  display: flex
+  flex: none
+  justify-content: center
+  position: relative
+  border-radius: 50%
+
+  input
+    cursor: pointer
+    position: absolute
+    left: 0
+    top: 0
+    width: 100%
+    height: 100%
+    opacity: 0
+
+  &::before
+    @include tools.absolute(true)
+    border-radius: 100%
+    background-color: currentColor
+    opacity: 0
+    pointer-events: none
+
+  &:hover::before
+    opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))
+
+  > .v-icon
+    opacity: var(--v-medium-emphasis-opacity)
+
+  .v-selection-control--disabled &,
+  .v-selection-control--dirty &,
+  .v-selection-control--error &
+    > .v-icon
+      opacity: 1
+
+  .v-selection-control--error:not(.v-selection-control--disabled) &
+    > .v-icon
+      color: rgb(var(--v-theme-error))
+
+  .v-selection-control--focus-visible &::before
+    opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))

package/lib/components/VSelectionControl/_variables.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
+
+$selection-control-disabled-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default;
+$selection-control-error-color: rgb(var(--v-theme-error)) !default;
+$selection-control-density: ('default': 0, 'comfortable': -1, 'compact': -3) !default;
+$selection-control-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
+$selection-control-size: 40px !default;

package/lib/components/VSelectionControl/index.mjs

@@ -0,0 +1,2 @@
+export { VSelectionControl } from "./VSelectionControl.mjs";
+//# sourceMappingURL=index.mjs.map

package/lib/components/VSelectionControl/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["VSelectionControl"],"sources":["../../../src/components/VSelectionControl/index.ts"],"sourcesContent":["export { VSelectionControl } from './VSelectionControl'\n"],"mappings":"SAASA,iB"}

package/lib/components/VSelectionControlGroup/VSelectionControlGroup.css

@@ -0,0 +1,3 @@
+.v-selection-control-group {
+  grid-area: control;
+}

package/lib/components/VSelectionControlGroup/VSelectionControlGroup.mjs

@@ -0,0 +1,65 @@
+import { createVNode as _createVNode } from "vue";
+// Styles
+import "./VSelectionControlGroup.css"; // Composables
+
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
+import { IconValue } from "../../composables/icons.mjs"; // Utilities
+
+import { computed, provide, toRef } from 'vue';
+import { defineComponent, getUid, useRender } from "../../util/index.mjs"; // Types
+
+export const VSelectionControlGroupSymbol = Symbol.for('vuetify:selection-control-group');
+export const VSelectionControlGroup = defineComponent({
+  name: 'VSelectionControlGroup',
+  props: {
+    disabled: Boolean,
+    id: String,
+    inline: Boolean,
+    name: String,
+    falseIcon: IconValue,
+    trueIcon: IconValue,
+    multiple: {
+      type: Boolean,
+      default: null
+    },
+    readonly: Boolean,
+    type: String,
+    modelValue: null
+  },
+  emits: {
+    'update:modelValue': val => true
+  },
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const modelValue = useProxiedModel(props, 'modelValue');
+    const uid = getUid();
+    const id = computed(() => props.id || `v-selection-control-group-${uid}`);
+    const name = computed(() => props.name || id.value);
+    provide(VSelectionControlGroupSymbol, {
+      disabled: toRef(props, 'disabled'),
+      inline: toRef(props, 'inline'),
+      modelValue,
+      multiple: computed(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value)),
+      name,
+      falseIcon: toRef(props, 'falseIcon'),
+      trueIcon: toRef(props, 'trueIcon'),
+      readonly: toRef(props, 'readonly'),
+      type: toRef(props, 'type')
+    });
+    useRender(() => {
+      var _slots$default;
+
+      return _createVNode("div", {
+        "class": "v-selection-control-group",
+        "aria-labelled-by": props.type === 'radio' ? id.value : undefined,
+        "role": props.type === 'radio' ? 'radiogroup' : undefined
+      }, [slots == null ? void 0 : (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
+    });
+    return {};
+  }
+
+});
+//# sourceMappingURL=VSelectionControlGroup.mjs.map

package/lib/components/VSelectionControlGroup/VSelectionControlGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VSelectionControlGroup.mjs","names":["useProxiedModel","IconValue","computed","provide","toRef","defineComponent","getUid","useRender","VSelectionControlGroupSymbol","Symbol","for","VSelectionControlGroup","name","props","disabled","Boolean","id","String","inline","falseIcon","trueIcon","multiple","type","default","readonly","modelValue","emits","val","setup","slots","uid","value","Array","isArray","undefined"],"sources":["../../../src/components/VSelectionControlGroup/VSelectionControlGroup.tsx"],"sourcesContent":["// Styles\nimport './VSelectionControlGroup.sass'\n\n// Composables\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { IconValue } from '@/composables/icons'\n\n// Utilities\nimport { computed, provide, toRef } from 'vue'\nimport { defineComponent, getUid, useRender } from '@/util'\n\n// Types\nimport type { InjectionKey, PropType, Ref } from 'vue'\n\nexport interface VSelectionGroupContext {\n  disabled: Ref<boolean>\n  inline: Ref<boolean>\n  name: Ref<string | undefined>\n  modelValue: Ref<any>\n  multiple: Ref<boolean>\n  trueIcon: Ref<IconValue | undefined>\n  falseIcon: Ref<IconValue | undefined>\n  readonly: Ref<boolean>\n  type: Ref<string | undefined>\n}\n\nexport const VSelectionControlGroupSymbol: InjectionKey<VSelectionGroupContext> = Symbol.for('vuetify:selection-control-group')\n\nexport const VSelectionControlGroup = defineComponent({\n  name: 'VSelectionControlGroup',\n\n  props: {\n    disabled: Boolean,\n    id: String,\n    inline: Boolean,\n    name: String,\n    falseIcon: IconValue,\n    trueIcon: IconValue,\n    multiple: {\n      type: Boolean as PropType<boolean | null>,\n      default: null,\n    },\n    readonly: Boolean,\n    type: String,\n    modelValue: null,\n  },\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const modelValue = useProxiedModel(props, 'modelValue')\n    const uid = getUid()\n    const id = computed(() => props.id || `v-selection-control-group-${uid}`)\n    const name = computed(() => props.name || id.value)\n\n    provide(VSelectionControlGroupSymbol, {\n      disabled: toRef(props, 'disabled'),\n      inline: toRef(props, 'inline'),\n      modelValue,\n      multiple: computed(() => !!props.multiple || (props.multiple == null && Array.isArray(modelValue.value))),\n      name,\n      falseIcon: toRef(props, 'falseIcon'),\n      trueIcon: toRef(props, 'trueIcon'),\n      readonly: toRef(props, 'readonly'),\n      type: toRef(props, 'type'),\n    })\n\n    useRender(() => {\n      return (\n        <div\n          class=\"v-selection-control-group\"\n          aria-labelled-by={ props.type === 'radio' ? id.value : undefined }\n          role={ props.type === 'radio' ? 'radiogroup' : undefined }\n        >\n          { slots?.default?.() }\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSelectionControlGroup = InstanceType<typeof VSelectionControlGroup>\n"],"mappings":";AAAA;AACA,sC,CAEA;;SACSA,e;SACAC,S,uCAET;;AACA,SAASC,QAAT,EAAmBC,OAAnB,EAA4BC,KAA5B,QAAyC,KAAzC;SACSC,e,EAAiBC,M,EAAQC,S,gCAElC;;AAeA,OAAO,MAAMC,4BAAkE,GAAGC,MAAM,CAACC,GAAP,CAAW,iCAAX,CAA3E;AAEP,OAAO,MAAMC,sBAAsB,GAAGN,eAAe,CAAC;EACpDO,IAAI,EAAE,wBAD8C;EAGpDC,KAAK,EAAE;IACLC,QAAQ,EAAEC,OADL;IAELC,EAAE,EAAEC,MAFC;IAGLC,MAAM,EAAEH,OAHH;IAILH,IAAI,EAAEK,MAJD;IAKLE,SAAS,EAAElB,SALN;IAMLmB,QAAQ,EAAEnB,SANL;IAOLoB,QAAQ,EAAE;MACRC,IAAI,EAAEP,OADE;MAERQ,OAAO,EAAE;IAFD,CAPL;IAWLC,QAAQ,EAAET,OAXL;IAYLO,IAAI,EAAEL,MAZD;IAaLQ,UAAU,EAAE;EAbP,CAH6C;EAmBpDC,KAAK,EAAE;IACL,qBAAsBC,GAAD,IAAc;EAD9B,CAnB6C;;EAuBpDC,KAAK,CAAEf,KAAF,QAAoB;IAAA,IAAX;MAAEgB;IAAF,CAAW;IACvB,MAAMJ,UAAU,GAAGzB,eAAe,CAACa,KAAD,EAAQ,YAAR,CAAlC;IACA,MAAMiB,GAAG,GAAGxB,MAAM,EAAlB;IACA,MAAMU,EAAE,GAAGd,QAAQ,CAAC,MAAMW,KAAK,CAACG,EAAN,IAAa,6BAA4Bc,GAAI,EAApD,CAAnB;IACA,MAAMlB,IAAI,GAAGV,QAAQ,CAAC,MAAMW,KAAK,CAACD,IAAN,IAAcI,EAAE,CAACe,KAAxB,CAArB;IAEA5B,OAAO,CAACK,4BAAD,EAA+B;MACpCM,QAAQ,EAAEV,KAAK,CAACS,KAAD,EAAQ,UAAR,CADqB;MAEpCK,MAAM,EAAEd,KAAK,CAACS,KAAD,EAAQ,QAAR,CAFuB;MAGpCY,UAHoC;MAIpCJ,QAAQ,EAAEnB,QAAQ,CAAC,MAAM,CAAC,CAACW,KAAK,CAACQ,QAAR,IAAqBR,KAAK,CAACQ,QAAN,IAAkB,IAAlB,IAA0BW,KAAK,CAACC,OAAN,CAAcR,UAAU,CAACM,KAAzB,CAAtD,CAJkB;MAKpCnB,IALoC;MAMpCO,SAAS,EAAEf,KAAK,CAACS,KAAD,EAAQ,WAAR,CANoB;MAOpCO,QAAQ,EAAEhB,KAAK,CAACS,KAAD,EAAQ,UAAR,CAPqB;MAQpCW,QAAQ,EAAEpB,KAAK,CAACS,KAAD,EAAQ,UAAR,CARqB;MASpCS,IAAI,EAAElB,KAAK,CAACS,KAAD,EAAQ,MAAR;IATyB,CAA/B,CAAP;IAYAN,SAAS,CAAC,MAAM;MAAA;;MACd;QAAA,SAEU,2BAFV;QAAA,oBAGuBM,KAAK,CAACS,IAAN,KAAe,OAAf,GAAyBN,EAAE,CAACe,KAA5B,GAAoCG,SAH3D;QAAA,QAIWrB,KAAK,CAACS,IAAN,KAAe,OAAf,GAAyB,YAAzB,GAAwCY;MAJnD,IAMML,KANN,sCAMMA,KAAK,CAAEN,OANb,qBAMM,oBAAAM,KAAK,CANX;IASD,CAVQ,CAAT;IAYA,OAAO,EAAP;EACD;;AAtDmD,CAAD,CAA9C"}

package/lib/components/VSelectionControlGroup/VSelectionControlGroup.sass

@@ -0,0 +1,9 @@
+@forward './variables'
+@use 'sass:map'
+@use 'sass:list'
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+.v-selection-control-group
+  grid-area: control

package/lib/components/VSelectionControlGroup/_variables.scss

@@ -0,0 +1,4 @@
+@use '../../styles/settings';
+@use '../../styles/tools';
+
+// Defaults

package/lib/components/VSelectionControlGroup/index.mjs

@@ -0,0 +1,2 @@
+export { VSelectionControlGroup } from "./VSelectionControlGroup.mjs";
+//# sourceMappingURL=index.mjs.map

package/lib/components/VSelectionControlGroup/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["VSelectionControlGroup"],"sources":["../../../src/components/VSelectionControlGroup/index.ts"],"sourcesContent":["export { VSelectionControlGroup } from './VSelectionControlGroup'\n"],"mappings":"SAASA,sB"}

package/lib/components/VSheet/VSheet.css

@@ -0,0 +1,23 @@
+.v-sheet {
+  display: block;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+}
+.v-sheet--border {
+  border-width: thin;
+  box-shadow: none;
+}
+.v-sheet--absolute {
+  position: absolute;
+}
+.v-sheet--fixed {
+  position: fixed;
+}
+.v-sheet--rounded {
+  border-radius: 4px;
+}

package/lib/components/VSheet/VSheet.mjs

@@ -1,47 +1,47 @@
 import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
 // Styles
-import "./VSheet.sass"; // Composables
+import "./VSheet.css"; // Composables
 
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
+import { makeLocationProps, useLocation } from "../../composables/location.mjs";
 import { makePositionProps, usePosition } from "../../composables/position.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs";
-import { makeThemeProps, useTheme } from "../../composables/theme.mjs"; // Utilities
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
 
-import { defineComponent, toRef } from 'vue';
-import { makeProps } from "../../util/index.mjs";
-export default defineComponent({
+import { toRef } from 'vue';
+import { defineComponent } from "../../util/index.mjs";
+export const VSheet = defineComponent({
   name: 'VSheet',
-  props: makeProps({
-    color: {
-      type: String,
-      default: 'surface'
-    },
+  props: {
+    color: String,
     ...makeBorderProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
+    ...makeLocationProps(),
     ...makePositionProps(),
     ...makeRoundedProps(),
     ...makeTagProps(),
     ...makeThemeProps()
-  }),
+  },
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
     const {
       themeClasses
-    } = useTheme(props);
+    } = provideTheme(props);
     const {
       backgroundColorClasses,
       backgroundColorStyles
     } = useBackgroundColor(toRef(props, 'color'));
     const {
       borderClasses
-    } = useBorder(props, 'v-sheet');
+    } = useBorder(props);
     const {
       dimensionStyles
     } = useDimension(props);
@@ -49,16 +49,18 @@ export default defineComponent({
       elevationClasses
     } = useElevation(props);
     const {
-      positionClasses,
-      positionStyles
-    } = usePosition(props, 'v-sheet');
+      locationStyles
+    } = useLocation(props);
+    const {
+      positionClasses
+    } = usePosition(props);
     const {
       roundedClasses
-    } = useRounded(props, 'v-sheet');
+    } = useRounded(props);
     return () => _createVNode(props.tag, {
       "class": ['v-sheet', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value],
-      "style": [backgroundColorStyles.value, dimensionStyles.value, positionStyles.value]
-    }, slots, 8, ["class", "style"]);
+      "style": [backgroundColorStyles.value, dimensionStyles.value, locationStyles.value]
+    }, slots);
   }
 
 });

package/lib/components/VSheet/VSheet.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VSheet/VSheet.tsx"],"names":["makeBorderProps","useBorder","makeDimensionProps","useDimension","makeElevationProps","useElevation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTagProps","useBackgroundColor","makeThemeProps","useTheme","defineComponent","toRef","makeProps","name","props","color","type","String","default","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","dimensionStyles","elevationClasses","positionClasses","positionStyles","roundedClasses","value"],"mappings":";AAAA;AACA,uB,CAEA;;SACSA,e,EAAiBC,S;SACjBC,kB,EAAoBC,Y;SACpBC,kB,EAAoBC,Y;SACpBC,iB,EAAmBC,W;SACnBC,gB,EAAkBC,U;SAClBC,Y;SACAC,kB;SACAC,c,EAAgBC,Q,uCAEzB;;AACA,SAASC,eAAT,EAA0BC,KAA1B,QAAuC,KAAvC;SACSC,S;AAET,eAAeF,eAAe,CAAC;AAC7BG,EAAAA,IAAI,EAAE,QADuB;AAG7BC,EAAAA,KAAK,EAAEF,SAAS,CAAC;AACfG,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAEC,MADD;AAELC,MAAAA,OAAO,EAAE;AAFJ,KADQ;AAKf,OAAGtB,eAAe,EALH;AAMf,OAAGE,kBAAkB,EANN;AAOf,OAAGE,kBAAkB,EAPN;AAQf,OAAGE,iBAAiB,EARL;AASf,OAAGE,gBAAgB,EATJ;AAUf,OAAGE,YAAY,EAVA;AAWf,OAAGE,cAAc;AAXF,GAAD,CAHa;;AAiB7BW,EAAAA,KAAK,CAAEL,KAAF,EAAS;AAAEM,IAAAA;AAAF,GAAT,EAAoB;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAmBZ,QAAQ,CAACK,KAAD,CAAjC;AACA,UAAM;AAAEQ,MAAAA,sBAAF;AAA0BC,MAAAA;AAA1B,QAAoDhB,kBAAkB,CAACI,KAAK,CAACG,KAAD,EAAQ,OAAR,CAAN,CAA5E;AACA,UAAM;AAAEU,MAAAA;AAAF,QAAoB3B,SAAS,CAACiB,KAAD,EAAQ,SAAR,CAAnC;AACA,UAAM;AAAEW,MAAAA;AAAF,QAAsB1B,YAAY,CAACe,KAAD,CAAxC;AACA,UAAM;AAAEY,MAAAA;AAAF,QAAuBzB,YAAY,CAACa,KAAD,CAAzC;AACA,UAAM;AAAEa,MAAAA,eAAF;AAAmBC,MAAAA;AAAnB,QAAsCzB,WAAW,CAACW,KAAD,EAAQ,SAAR,CAAvD;AACA,UAAM;AAAEe,MAAAA;AAAF,QAAqBxB,UAAU,CAACS,KAAD,EAAQ,SAAR,CAArC;AAEA,WAAO;AAAA,eAEI,CACL,SADK,EAELO,YAAY,CAACS,KAFR,EAGLR,sBAAsB,CAACQ,KAHlB,EAILN,aAAa,CAACM,KAJT,EAKLJ,gBAAgB,CAACI,KALZ,EAMLH,eAAe,CAACG,KANX,EAOLD,cAAc,CAACC,KAPV,CAFJ;AAAA,eAWI,CACLP,qBAAqB,CAACO,KADjB,EAELL,eAAe,CAACK,KAFX,EAGLF,cAAc,CAACE,KAHV;AAXJ,OAgBOV,KAhBP,wBAAP;AAmBD;;AA7C4B,CAAD,CAA9B","sourcesContent":["// Styles\nimport './VSheet.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeThemeProps, useTheme } from '@/composables/theme'\n\n// Utilities\nimport { defineComponent, toRef } from 'vue'\nimport { makeProps } from '@/util'\n\nexport default defineComponent({\n  name: 'VSheet',\n\n  props: makeProps({\n    color: {\n      type: String,\n      default: 'surface',\n    },\n    ...makeBorderProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makePositionProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps(),\n    ...makeThemeProps(),\n  }),\n\n  setup (props, { slots }) {\n    const { themeClasses } = useTheme(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { borderClasses } = useBorder(props, 'v-sheet')\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { positionClasses, positionStyles } = usePosition(props, 'v-sheet')\n    const { roundedClasses } = useRounded(props, 'v-sheet')\n\n    return () => (\n      <props.tag\n        class={[\n          'v-sheet',\n          themeClasses.value,\n          backgroundColorClasses.value,\n          borderClasses.value,\n          elevationClasses.value,\n          positionClasses.value,\n          roundedClasses.value,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          dimensionStyles.value,\n          positionStyles.value,\n        ]}\n        v-slots={ slots }\n      />\n    )\n  },\n})\n"],"file":"VSheet.mjs"}
+{"version":3,"file":"VSheet.mjs","names":["makeBorderProps","useBorder","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeLocationProps","useLocation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeTagProps","useBackgroundColor","makeThemeProps","provideTheme","toRef","defineComponent","VSheet","name","props","color","String","setup","slots","themeClasses","backgroundColorClasses","backgroundColorStyles","borderClasses","dimensionStyles","elevationClasses","locationStyles","positionClasses","roundedClasses","value"],"sources":["../../../src/components/VSheet/VSheet.tsx"],"sourcesContent":["// Styles\nimport './VSheet.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLocationProps, useLocation } from '@/composables/location'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { toRef } from 'vue'\nimport { defineComponent } from '@/util'\n\nexport const VSheet = defineComponent({\n  name: 'VSheet',\n\n  props: {\n    color: String,\n\n    ...makeBorderProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeLocationProps(),\n    ...makePositionProps(),\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 { borderClasses } = useBorder(props)\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { locationStyles } = useLocation(props)\n    const { positionClasses } = usePosition(props)\n    const { roundedClasses } = useRounded(props)\n\n    return () => (\n      <props.tag\n        class={[\n          'v-sheet',\n          themeClasses.value,\n          backgroundColorClasses.value,\n          borderClasses.value,\n          elevationClasses.value,\n          positionClasses.value,\n          roundedClasses.value,\n        ]}\n        style={[\n          backgroundColorStyles.value,\n          dimensionStyles.value,\n          locationStyles.value,\n        ]}\n        v-slots={ slots }\n      />\n    )\n  },\n})\n"],"mappings":";AAAA;AACA,sB,CAEA;;SACSA,e,EAAiBC,S;SACjBC,kB,EAAoBC,Y;SACpBC,kB,EAAoBC,Y;SACpBC,iB,EAAmBC,W;SACnBC,iB,EAAmBC,W;SACnBC,gB,EAAkBC,U;SAClBC,Y;SACAC,kB;SACAC,c,EAAgBC,Y,uCAEzB;;AACA,SAASC,KAAT,QAAsB,KAAtB;SACSC,e;AAET,OAAO,MAAMC,MAAM,GAAGD,eAAe,CAAC;EACpCE,IAAI,EAAE,QAD8B;EAGpCC,KAAK,EAAE;IACLC,KAAK,EAAEC,MADF;IAGL,GAAGtB,eAAe,EAHb;IAIL,GAAGE,kBAAkB,EAJhB;IAKL,GAAGE,kBAAkB,EALhB;IAML,GAAGE,iBAAiB,EANf;IAOL,GAAGE,iBAAiB,EAPf;IAQL,GAAGE,gBAAgB,EARd;IASL,GAAGE,YAAY,EATV;IAUL,GAAGE,cAAc;EAVZ,CAH6B;;EAgBpCS,KAAK,CAAEH,KAAF,QAAoB;IAAA,IAAX;MAAEI;IAAF,CAAW;IACvB,MAAM;MAAEC;IAAF,IAAmBV,YAAY,CAACK,KAAD,CAArC;IACA,MAAM;MAAEM,sBAAF;MAA0BC;IAA1B,IAAoDd,kBAAkB,CAACG,KAAK,CAACI,KAAD,EAAQ,OAAR,CAAN,CAA5E;IACA,MAAM;MAAEQ;IAAF,IAAoB3B,SAAS,CAACmB,KAAD,CAAnC;IACA,MAAM;MAAES;IAAF,IAAsB1B,YAAY,CAACiB,KAAD,CAAxC;IACA,MAAM;MAAEU;IAAF,IAAuBzB,YAAY,CAACe,KAAD,CAAzC;IACA,MAAM;MAAEW;IAAF,IAAqBxB,WAAW,CAACa,KAAD,CAAtC;IACA,MAAM;MAAEY;IAAF,IAAsBvB,WAAW,CAACW,KAAD,CAAvC;IACA,MAAM;MAAEa;IAAF,IAAqBtB,UAAU,CAACS,KAAD,CAArC;IAEA,OAAO;MAAA,SAEI,CACL,SADK,EAELK,YAAY,CAACS,KAFR,EAGLR,sBAAsB,CAACQ,KAHlB,EAILN,aAAa,CAACM,KAJT,EAKLJ,gBAAgB,CAACI,KALZ,EAMLF,eAAe,CAACE,KANX,EAOLD,cAAc,CAACC,KAPV,CAFJ;MAAA,SAWI,CACLP,qBAAqB,CAACO,KADjB,EAELL,eAAe,CAACK,KAFX,EAGLH,cAAc,CAACG,KAHV;IAXJ,GAgBOV,KAhBP,CAAP;EAmBD;;AA7CmC,CAAD,CAA9B"}

package/lib/components/VSheet/VSheet.sass

@@ -1,20 +1,15 @@
-// Imports
-@import './index'
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
 .v-sheet
-  @include border($sheet-border...)
-  @include elevation($sheet-elevation)
-  @include position($sheet-positions)
-  @include rounded($sheet-border-radius)
-  @include theme($sheet-theme...)
+  display: block
 
-  &--rounded
-    @include rounded($sheet-rounded-border-radius)
-
-// VDialog
-.v-sheet
-  .v-dialog .v-overlay__content > &
-    border-radius: inherit
-    overflow: hidden
+  @include tools.border($sheet-border...)
+  @include tools.elevation($sheet-elevation)
+  @include tools.position($sheet-positions)
+  @include tools.rounded($sheet-border-radius)
+  @include tools.theme($sheet-theme...)
 
-    @include elevation($sheet-dialog-elevation)
+  &--rounded
+    @include tools.rounded($sheet-rounded-border-radius)