variant.mjs 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. import { createVNode as _createVNode, Fragment as _Fragment } from "vue";
  2. // Composables
  3. import { useColor } from "./color.mjs"; // Utilities
  4. import { computed, unref } from 'vue';
  5. import { getCurrentInstanceName, propsFactory } from "../util/index.mjs"; // Types
  6. export const allowedVariants = ['elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'];
  7. export function genOverlays(isClickable, name) {
  8. return _createVNode(_Fragment, null, [isClickable && _createVNode("span", {
  9. "key": "overlay",
  10. "class": `${name}__overlay`
  11. }, null), _createVNode("span", {
  12. "key": "underlay",
  13. "class": `${name}__underlay`
  14. }, null)]);
  15. }
  16. export const makeVariantProps = propsFactory({
  17. color: String,
  18. variant: {
  19. type: String,
  20. default: 'elevated',
  21. validator: v => allowedVariants.includes(v)
  22. }
  23. }, 'variant');
  24. export function useVariant(props) {
  25. let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
  26. const variantClasses = computed(() => {
  27. const {
  28. variant
  29. } = unref(props);
  30. return `${name}--variant-${variant}`;
  31. });
  32. const {
  33. colorClasses,
  34. colorStyles
  35. } = useColor(computed(() => {
  36. const {
  37. variant,
  38. color
  39. } = unref(props);
  40. return {
  41. [['elevated', 'flat'].includes(variant) ? 'background' : 'text']: color
  42. };
  43. }));
  44. return {
  45. colorClasses,
  46. colorStyles,
  47. variantClasses
  48. };
  49. }
  50. //# sourceMappingURL=variant.mjs.map