Skip to content

Instantly share code, notes, and snippets.

@IlCallo
IlCallo / apollo-helpers.ts
Created March 31, 2023 16:08
Helpers to use together with @vue/apollo-composable
import { gql } from "@apollo/client/core";
import { useQuery } from "@vue/apollo-composable";
import { computed, ComputedRef, Ref } from "vue";
export interface ApolloResult<Model> {
// This key is usually the name of the query
[key: string]: Model | undefined;
}
type ApolloResultRef<Model> = Ref<ApolloResult<Model> | undefined>;
@IlCallo
IlCallo / axios-mock.ts
Created January 23, 2023 12:47
An helper to mock Axios requests while prototyping
import { AxiosResponse } from 'axios';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const createResponseStub: <T = any>(data?: T) => AxiosResponse = (data) => ({
config: {},
data,
status: 200,
statusText: '',
headers: {},
});
@IlCallo
IlCallo / model.ts
Created December 22, 2022 16:34
Quasar Dialog helpers, which differentiate between create and edit mode
export interface MyEntity {
id?: number;
title: string;
}
import {
addEscapeKey,
removeEscapeKey,
} from 'quasar/src/utils/private/escape-key.js';
import { onMounted, onUnmounted } from 'vue';
// Quasar doesn't offer a way to hook into the esc handler from inside the dialog component itself,
// so we have to do it ourselves
// This requires the QDialog to have `no-esc-dismiss` and `no-shake` (purely aesthetic) prop enabled
export function useDialogEscapeKey(
@IlCallo
IlCallo / use-dialog-backdrop-click.ts
Last active December 6, 2022 14:33
Hijack QDialog click on backdrop to manage it ourselves
import { QDialog } from 'quasar';
import { computed, Ref, watch } from 'vue';
// Quasar doesn't offer a way to hook into the backdrop click event from inside the dialog component itself,
// so we have to do it ourselves and prevent the default handler from Quasar from firing
export function useDialogBackdropClick(
dialogRef: Ref<QDialog | undefined>,
handler: (event: FocusEvent) => void | Promise<void>,
) {
// Apparently retrieving `document.querySelector('.q-dialog__backdrop')` on onMounted doesn't work,
@IlCallo
IlCallo / cli-create.ts
Last active August 12, 2022 13:27
Run a "create" command on the CLI and programmatically answer it's prompts. Check out https://github.com/dreamonkey/cli-ghostwriter which has been derived from this example
import { spawn } from "node:child_process";
export type SupportedPackageManager = "npm" | "yarn" | "pnpm";
export const ACCEPT_DEFAULT = "ACCEPT_DEFAULT";
export const ENTER_KEY = "\n";
export const WHITESPACE_KEY = " ";
// Octals literals are banned into ESM
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_octal#octal_escape_sequences
export const DOWN_KEY = "\u001b[B";
@IlCallo
IlCallo / _color-additions.scss
Created January 17, 2022 17:00
SCSS helpers which can be possibly added to Quasar core
// 'src/css/_color-additions.scss'
// import at the end of `src/css/quasar.variables.scss` as `@import 'color.additions';`
$white: #fff;
$black: #000;
// There must be at least 2 colors here, or it won't be taken as a list and the following code won't work
$additional-colors: (
'custom-color1' $custom-color1,
'custom-color2' $custom-color2
@IlCallo
IlCallo / validation.ts
Created January 17, 2022 15:22
Collection of validation rules for Quasar internal validation
import { isEmpty } from 'lodash-es';
import { useI18n } from 'src/boot/i18n';
const { t } = useI18n();
/**
* Validation rule which returns true if the value is considered "not empty",
* or an error message otherwise.
*/
export function required<T>(value: T) {
@IlCallo
IlCallo / axios-uploader-plugin.ts
Last active January 17, 2022 15:01
Axios uploader + TypeScript
import axios, {
AxiosError,
AxiosRequestConfig,
AxiosResponse,
Method,
} from 'axios';
import {
QUploaderFactoryFn,
QUploaderFactoryObject,
ValueOrFunction,
@IlCallo
IlCallo / app-inject.ts
Created January 13, 2022 18:10
Inject stuff even outside components scope
import { App, InjectionKey } from 'vue';
/**
* Inject a service using Vue app reference and the injection key.
* Use this to inject a service when outside a component scope (eg. into a Quasar boot file),
* where Vue `inject` won't work.
* This is expecially useful when the data is provided from a third-party package
* which only expose the injection key.
*
* @example