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);
}