vue#inject JavaScript Examples

The following examples show how to use vue#inject. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: use-theme-classes.js    From konsta with MIT License 6 votes vote down vote up 
useThemeClasses = (props, classesObj) =>
  computed(() => {
    const context = inject('KonstaContext');
    let theme = context.value.theme || 'ios';
    if (props.ios) theme = 'ios';
    if (props.material) theme = 'material';
    return themeClasses(
      typeof classesObj === 'function' ? classesObj() : classesObj,
      theme
    );
  })
Example #2
Source File: initialState.js    From fes.js with MIT License 5 votes vote down vote up 
export default function initialStateModel() {
    return inject('initialState');
}
Example #3
Source File: use-dark-classes.js    From konsta with MIT License 5 votes vote down vote up 
useDarkClasses = (classNames) => {
  const context = inject('KonstaContext');
  if (!context.value.dark) return '';
  return classNames;
}
Example #4
Source File: use-theme.js    From konsta with MIT License 5 votes vote down vote up 
useTheme = (props = {}) =>
  computed(() => {
    const context = inject('KonstaContext');
    let theme = context.value.theme || 'ios';
    if (props.ios) theme = 'ios';
    if (props.material) theme = 'material';
    return theme;
  })
Example #5
Source File: use-touch-ripple.js    From konsta with MIT License 5 votes vote down vote up 
useTouchRipple = (elRef, props, addCondition) => {
  const context = inject('KonstaContext');
  const ripple = ref(null);
  let eventsAttached = false;

  const getEl = () => {
    if (!elRef || !elRef.value) return null;
    let el = elRef.value;
    if (el.$el) el = el.$el;
    return el;
  };

  const theme = () => {
    let value = context.value.theme || 'ios';
    if (props.ios) value = 'ios';
    if (props.material) value = 'material';
    return value;
  };
  const needsTouchRipple = () => {
    return (
      theme() === 'material' &&
      props.touchRipple &&
      (addCondition ? addCondition() : true)
    );
  };
  const removeRipple = () => {
    if (ripple.value) ripple.value.remove();
    ripple.value = null;
  };

  const onPointerDown = (e) => {
    ripple.value = new TouchRipple(getEl(), e.pageX, e.pageY);
  };
  const onPointerMove = () => {
    removeRipple();
  };
  const onPointerUp = () => {
    removeRipple();
  };

  const attachEvents = () => {
    if (!context.value.touchRipple || eventsAttached) return;
    eventsAttached = true;
    const el = getEl();
    el.addEventListener('pointerdown', onPointerDown);
    el.addEventListener('pointermove', onPointerMove);
    el.addEventListener('pointerup', onPointerUp);
  };
  const detachEvents = () => {
    eventsAttached = false;
    const el = getEl();
    el.removeEventListener('pointerdown', onPointerDown);
    el.removeEventListener('pointermove', onPointerMove);
    el.removeEventListener('pointerup', onPointerUp);
  };

  watch(
    () => needsTouchRipple(),
    (newV) => {
      if (newV) attachEvents();
      else detachEvents();
    }
  );

  onMounted(() => {
    if (!getEl() || !needsTouchRipple()) return;
    attachEvents();
  });

  onBeforeUnmount(() => {
    if (!getEl() || !needsTouchRipple()) return;
    detachEvents();
  });
}
Example #6
Source File: formInject.js    From Ale with MIT License 5 votes vote down vote up 
export function getInject() {
  let alForm = inject('alForm', '');
  let alFormItem = inject('alFormItem', '');
  return {
    alForm,
    alFormItem
  };
}
Example #7
Source File: clients.js    From p2p-tunnel with GNU General Public License v2.0 5 votes vote down vote up 
injectClients = () => {
    return inject(provideClientsKey);
}
Example #8
Source File: register.js    From p2p-tunnel with GNU General Public License v2.0 5 votes vote down vote up 
injectRegister = () => {
    return inject(provideRegisterKey);
}
Example #9
Source File: shareData.js    From p2p-tunnel with GNU General Public License v2.0 5 votes vote down vote up 
injectShareData = () => {
    return inject(shareDataKey);
}
Example #10
Source File: websocket.js    From p2p-tunnel with GNU General Public License v2.0 5 votes vote down vote up 
injectWebsocket = () => {
    return inject(provideWebsocketKey);
}
Example #11
Source File: list-share-data.js    From p2p-tunnel with GNU General Public License v2.0 5 votes vote down vote up 
injectFilesData = () => {
    return inject(provideFilesDataKey);
}
Example #12
Source File: register.js    From p2p-tunnel with GNU General Public License v2.0 5 votes vote down vote up 
injectRegister = () => {
    return inject(provideRegisterKey);
}