VCheckbox.mjs 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
  2. // Styles
  3. import "./VCheckbox.css";
  4. // Components
  5. import { makeVCheckboxBtnProps, VCheckboxBtn } from "./VCheckboxBtn.mjs";
  6. import { makeVInputProps, VInput } from "../VInput/VInput.mjs"; // Composables
  7. import { useFocus } from "../../composables/focus.mjs";
  8. import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
  9. import { computed } from 'vue';
  10. import { filterInputAttrs, genericComponent, getUid, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
  11. export const makeVCheckboxProps = propsFactory({
  12. ...makeVInputProps(),
  13. ...omit(makeVCheckboxBtnProps(), ['inline'])
  14. }, 'VCheckbox');
  15. export const VCheckbox = genericComponent()({
  16. name: 'VCheckbox',
  17. inheritAttrs: false,
  18. props: makeVCheckboxProps(),
  19. emits: {
  20. 'update:modelValue': value => true,
  21. 'update:focused': focused => true
  22. },
  23. setup(props, _ref) {
  24. let {
  25. attrs,
  26. slots
  27. } = _ref;
  28. const model = useProxiedModel(props, 'modelValue');
  29. const {
  30. isFocused,
  31. focus,
  32. blur
  33. } = useFocus(props);
  34. const uid = getUid();
  35. const id = computed(() => props.id || `checkbox-${uid}`);
  36. useRender(() => {
  37. const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
  38. const [inputProps, _1] = VInput.filterProps(props);
  39. const [checkboxProps, _2] = VCheckboxBtn.filterProps(props);
  40. return _createVNode(VInput, _mergeProps({
  41. "class": ['v-checkbox', props.class]
  42. }, inputAttrs, inputProps, {
  43. "modelValue": model.value,
  44. "onUpdate:modelValue": $event => model.value = $event,
  45. "id": id.value,
  46. "focused": isFocused.value,
  47. "style": props.style
  48. }), {
  49. ...slots,
  50. default: _ref2 => {
  51. let {
  52. id,
  53. messagesId,
  54. isDisabled,
  55. isReadonly
  56. } = _ref2;
  57. return _createVNode(VCheckboxBtn, _mergeProps(checkboxProps, {
  58. "id": id.value,
  59. "aria-describedby": messagesId.value,
  60. "disabled": isDisabled.value,
  61. "readonly": isReadonly.value
  62. }, controlAttrs, {
  63. "modelValue": model.value,
  64. "onUpdate:modelValue": $event => model.value = $event,
  65. "onFocus": focus,
  66. "onBlur": blur
  67. }), slots);
  68. }
  69. });
  70. });
  71. return {};
  72. }
  73. });
  74. //# sourceMappingURL=VCheckbox.mjs.map