VCheckboxBtn.mjs 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
  2. // Components
  3. import { makeVSelectionControlProps, VSelectionControl } from "../VSelectionControl/VSelectionControl.mjs"; // Composables
  4. import { IconValue } from "../../composables/icons.mjs";
  5. import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
  6. import { computed } from 'vue';
  7. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
  8. export const makeVCheckboxBtnProps = propsFactory({
  9. indeterminate: Boolean,
  10. indeterminateIcon: {
  11. type: IconValue,
  12. default: '$checkboxIndeterminate'
  13. },
  14. ...makeVSelectionControlProps({
  15. falseIcon: '$checkboxOff',
  16. trueIcon: '$checkboxOn'
  17. })
  18. }, 'VCheckboxBtn');
  19. export const VCheckboxBtn = genericComponent()({
  20. name: 'VCheckboxBtn',
  21. props: makeVCheckboxBtnProps(),
  22. emits: {
  23. 'update:modelValue': value => true,
  24. 'update:indeterminate': val => true
  25. },
  26. setup(props, _ref) {
  27. let {
  28. slots
  29. } = _ref;
  30. const indeterminate = useProxiedModel(props, 'indeterminate');
  31. const model = useProxiedModel(props, 'modelValue');
  32. function onChange(v) {
  33. if (indeterminate.value) {
  34. indeterminate.value = false;
  35. }
  36. }
  37. const falseIcon = computed(() => {
  38. return indeterminate.value ? props.indeterminateIcon : props.falseIcon;
  39. });
  40. const trueIcon = computed(() => {
  41. return indeterminate.value ? props.indeterminateIcon : props.trueIcon;
  42. });
  43. useRender(() => _createVNode(VSelectionControl, _mergeProps(props, {
  44. "modelValue": model.value,
  45. "onUpdate:modelValue": [$event => model.value = $event, onChange],
  46. "class": ['v-checkbox-btn', props.class],
  47. "style": props.style,
  48. "type": "checkbox",
  49. "falseIcon": falseIcon.value,
  50. "trueIcon": trueIcon.value,
  51. "aria-checked": indeterminate.value ? 'mixed' : undefined
  52. }), slots));
  53. return {};
  54. }
  55. });
  56. //# sourceMappingURL=VCheckboxBtn.mjs.map