VSwitch.mjs 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VSwitch.css";
  4. // Components
  5. import { makeVInputProps, VInput } from "../VInput/VInput.mjs";
  6. import { VProgressCircular } from "../VProgressCircular/index.mjs";
  7. import { makeVSelectionControlProps, VSelectionControl } from "../VSelectionControl/VSelectionControl.mjs"; // Composables
  8. import { useFocus } from "../../composables/focus.mjs";
  9. import { LoaderSlot, useLoader } from "../../composables/loader.mjs";
  10. import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
  11. import { computed, ref } from 'vue';
  12. import { filterInputAttrs, genericComponent, getUid, propsFactory, useRender } from "../../util/index.mjs"; // Types
  13. export const makeVSwitchProps = propsFactory({
  14. indeterminate: Boolean,
  15. inset: Boolean,
  16. flat: Boolean,
  17. loading: {
  18. type: [Boolean, String],
  19. default: false
  20. },
  21. ...makeVInputProps(),
  22. ...makeVSelectionControlProps()
  23. }, 'VSwitch');
  24. export const VSwitch = genericComponent()({
  25. name: 'VSwitch',
  26. inheritAttrs: false,
  27. props: makeVSwitchProps(),
  28. emits: {
  29. 'update:focused': focused => true,
  30. 'update:modelValue': () => true,
  31. 'update:indeterminate': val => true
  32. },
  33. setup(props, _ref) {
  34. let {
  35. attrs,
  36. slots
  37. } = _ref;
  38. const indeterminate = useProxiedModel(props, 'indeterminate');
  39. const model = useProxiedModel(props, 'modelValue');
  40. const {
  41. loaderClasses
  42. } = useLoader(props);
  43. const {
  44. isFocused,
  45. focus,
  46. blur
  47. } = useFocus(props);
  48. const loaderColor = computed(() => {
  49. return typeof props.loading === 'string' && props.loading !== '' ? props.loading : props.color;
  50. });
  51. const uid = getUid();
  52. const id = computed(() => props.id || `switch-${uid}`);
  53. function onChange() {
  54. if (indeterminate.value) {
  55. indeterminate.value = false;
  56. }
  57. }
  58. useRender(() => {
  59. const [inputAttrs, controlAttrs] = filterInputAttrs(attrs);
  60. const [inputProps, _1] = VInput.filterProps(props);
  61. const [controlProps, _2] = VSelectionControl.filterProps(props);
  62. const control = ref();
  63. function onClick(e) {
  64. e.stopPropagation();
  65. e.preventDefault();
  66. control.value?.input?.click();
  67. }
  68. return _createVNode(VInput, _mergeProps({
  69. "class": ['v-switch', {
  70. 'v-switch--inset': props.inset
  71. }, {
  72. 'v-switch--indeterminate': indeterminate.value
  73. }, loaderClasses.value, props.class],
  74. "style": props.style
  75. }, inputAttrs, inputProps, {
  76. "id": id.value,
  77. "focused": isFocused.value
  78. }), {
  79. ...slots,
  80. default: _ref2 => {
  81. let {
  82. id,
  83. messagesId,
  84. isDisabled,
  85. isReadonly,
  86. isValid
  87. } = _ref2;
  88. return _createVNode(VSelectionControl, _mergeProps({
  89. "ref": control
  90. }, controlProps, {
  91. "modelValue": model.value,
  92. "onUpdate:modelValue": [$event => model.value = $event, onChange],
  93. "id": id.value,
  94. "aria-describedby": messagesId.value,
  95. "type": "checkbox",
  96. "aria-checked": indeterminate.value ? 'mixed' : undefined,
  97. "disabled": isDisabled.value,
  98. "readonly": isReadonly.value,
  99. "onFocus": focus,
  100. "onBlur": blur
  101. }, controlAttrs), {
  102. ...slots,
  103. default: () => _createVNode("div", {
  104. "class": "v-switch__track",
  105. "onClick": onClick
  106. }, null),
  107. input: _ref3 => {
  108. let {
  109. textColorClasses,
  110. textColorStyles
  111. } = _ref3;
  112. return _createVNode("div", {
  113. "class": ['v-switch__thumb', textColorClasses.value],
  114. "style": textColorStyles.value
  115. }, [props.loading && _createVNode(LoaderSlot, {
  116. "name": "v-switch",
  117. "active": true,
  118. "color": isValid.value === false ? undefined : loaderColor.value
  119. }, {
  120. default: slotProps => slots.loader ? slots.loader(slotProps) : _createVNode(VProgressCircular, {
  121. "active": slotProps.isActive,
  122. "color": slotProps.color,
  123. "indeterminate": true,
  124. "size": "16",
  125. "width": "2"
  126. }, null)
  127. })]);
  128. }
  129. });
  130. }
  131. });
  132. });
  133. return {};
  134. }
  135. });
  136. //# sourceMappingURL=VSwitch.mjs.map