routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+12
@@ -0,0 +1,12 @@
|
||||
@layer vuetify-components {
|
||||
.v-radio-group > .v-input__control {
|
||||
flex-direction: column;
|
||||
}
|
||||
.v-radio-group > .v-input__control > .v-label {
|
||||
margin-inline-start: 16px;
|
||||
}
|
||||
.v-radio-group > .v-input__control > .v-label + .v-selection-control-group {
|
||||
padding-inline-start: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
+1602
File diff suppressed because it is too large
Load Diff
+99
@@ -0,0 +1,99 @@
|
||||
import { Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps, createElementVNode as _createElementVNode } from "vue";
|
||||
// Styles
|
||||
import "./VRadioGroup.css";
|
||||
|
||||
// Components
|
||||
import { makeVInputProps, VInput } from "../VInput/VInput.js";
|
||||
import { VLabel } from "../VLabel/index.js";
|
||||
import { VSelectionControl } from "../VSelectionControl/index.js";
|
||||
import { makeSelectionControlGroupProps, VSelectionControlGroup } from "../VSelectionControlGroup/VSelectionControlGroup.js"; // Composables
|
||||
import { forwardRefs } from "../../composables/forwardRefs.js";
|
||||
import { IconValue } from "../../composables/icons.js";
|
||||
import { useProxiedModel } from "../../composables/proxiedModel.js"; // Utilities
|
||||
import { computed, ref, useId } from 'vue';
|
||||
import { filterInputAttrs, genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVRadioGroupProps = propsFactory({
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 'auto'
|
||||
},
|
||||
...omit(makeVInputProps(), ['direction']),
|
||||
...omit(makeSelectionControlGroupProps(), ['multiple']),
|
||||
trueIcon: {
|
||||
type: IconValue,
|
||||
default: '$radioOn'
|
||||
},
|
||||
falseIcon: {
|
||||
type: IconValue,
|
||||
default: '$radioOff'
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'radio'
|
||||
}
|
||||
}, 'VRadioGroup');
|
||||
export const VRadioGroup = genericComponent()({
|
||||
name: 'VRadioGroup',
|
||||
inheritAttrs: false,
|
||||
props: makeVRadioGroupProps(),
|
||||
emits: {
|
||||
'update:modelValue': value => true
|
||||
},
|
||||
setup(props, {
|
||||
attrs,
|
||||
slots
|
||||
}) {
|
||||
const uid = useId();
|
||||
const id = computed(() => props.id || `radio-group-${uid}`);
|
||||
const model = useProxiedModel(props, 'modelValue');
|
||||
const inputRef = ref();
|
||||
useRender(() => {
|
||||
const [rootAttrs, controlAttrs] = filterInputAttrs(attrs);
|
||||
const inputProps = VInput.filterProps(props);
|
||||
const controlProps = VSelectionControl.filterProps(props);
|
||||
const label = slots.label ? slots.label({
|
||||
label: props.label,
|
||||
props: {
|
||||
for: id.value
|
||||
}
|
||||
}) : props.label;
|
||||
return _createVNode(VInput, _mergeProps({
|
||||
"ref": inputRef,
|
||||
"class": ['v-radio-group', props.class],
|
||||
"style": props.style
|
||||
}, rootAttrs, inputProps, {
|
||||
"modelValue": model.value,
|
||||
"onUpdate:modelValue": $event => model.value = $event,
|
||||
"id": id.value
|
||||
}), {
|
||||
...slots,
|
||||
default: ({
|
||||
id,
|
||||
messagesId,
|
||||
isDisabled,
|
||||
isReadonly
|
||||
}) => _createElementVNode(_Fragment, null, [label && _createVNode(VLabel, {
|
||||
"id": id.value
|
||||
}, {
|
||||
default: () => [label]
|
||||
}), _createVNode(VSelectionControlGroup, _mergeProps(controlProps, {
|
||||
"id": id.value,
|
||||
"aria-describedby": messagesId.value,
|
||||
"defaultsTarget": "VRadio",
|
||||
"trueIcon": props.trueIcon,
|
||||
"falseIcon": props.falseIcon,
|
||||
"type": props.type,
|
||||
"disabled": isDisabled.value,
|
||||
"readonly": isReadonly.value,
|
||||
"aria-labelledby": label ? id.value : undefined,
|
||||
"multiple": false
|
||||
}, controlAttrs, {
|
||||
"modelValue": model.value,
|
||||
"onUpdate:modelValue": $event => model.value = $event
|
||||
}), slots)])
|
||||
});
|
||||
});
|
||||
return forwardRefs({}, inputRef);
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VRadioGroup.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+14
@@ -0,0 +1,14 @@
|
||||
@use '../../styles/tools'
|
||||
@use './variables' as *
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-radio-group
|
||||
> .v-input__control
|
||||
flex-direction: column
|
||||
|
||||
> .v-label
|
||||
margin-inline-start: $radio-group-label-margin-inline-start
|
||||
|
||||
+ .v-selection-control-group
|
||||
padding-inline-start: $radio-group-label-selection-group-padding-inline
|
||||
margin-top: $radio-group-label-selection-group-margin-top
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
$radio-group-label-margin-inline-start: 16px !default;
|
||||
$radio-group-label-selection-group-margin-top: 8px !default;
|
||||
$radio-group-label-selection-group-padding-inline: 6px !default;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VRadioGroup } from './VRadioGroup.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VRadioGroup } from "./VRadioGroup.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VRadioGroup"],"sources":["../../../src/components/VRadioGroup/index.ts"],"sourcesContent":["export { VRadioGroup } from './VRadioGroup'\n"],"mappings":"SAASA,WAAW","ignoreList":[]}
|
||||
Reference in New Issue
Block a user