useInteractivity.js 1.8 KB

12345678910111213141516171819202122232425262728293031
  1. import useVars from './useVars.js'
  2. import { getClasses } from '../utils/classes.js'
  3. import useColor from './useColor.js'
  4. function useHook() { // useInteractivity
  5. const { colors, color } = useColor()
  6. const { pxs, percents } = useVars()
  7. const AccentColor = { title: 'Accent Color', classes: [] }
  8. const Appearance = { title: 'Appearance', classes: getClasses('none', {name: 'appearance-', value: 'appearance', scss: 0}) }
  9. const Cursor = { title: 'Cursor', classes: [] }
  10. const CaretColor = { title: 'Caret Color', classes: [] }
  11. const PointerEvents = { title: 'Pointer Events', classes: getClasses('none, auto', {name: 'pointer-events-', value: 'pointer-events', scss: 0}) }
  12. const Resize = { title: 'Resize', classes: [] }
  13. const ScrollBehavior = { title: 'Scroll Behavior', classes: getClasses('auto, smooth', {name: 'scroll-', value: 'scroll-behavior', scss: 0}) }
  14. const ScrollMargin = { title: 'Scroll Margin', classes: [] }
  15. const ScrollPadding = { title: 'Scroll Padding', classes: [] }
  16. const ScrollSnapAlign = { title: 'Scroll Snap Align', classes: [] }
  17. const ScrollSnapStop = { title: 'Scroll Snap Stop', classes: [] }
  18. const ScrollSnapType = { title: 'Scroll Snap Type', classes: [] }
  19. const TouchAction = { title: 'Touch Action', classes: [] }
  20. const UserSelect = { title: 'User Select', classes: getClasses('none, text, all, auto', {name: 'select-', value: 'user-select', scss: 0}) }
  21. const WillChange = { title: 'Will Change', classes: getClasses('auto, scroll: scroll-position,contents,transform', {name: 'will-change-', value: 'will-change', scss: 0}) }
  22. return {
  23. AccentColor, Appearance, Cursor, CaretColor, PointerEvents, Resize, ScrollBehavior, ScrollMargin, ScrollPadding, ScrollSnapAlign, ScrollSnapStop, ScrollSnapType, TouchAction, UserSelect, WillChange
  24. }
  25. }
  26. export default useHook