Sigurd Moland Wahl SigurdMW

SigurdMW / store.ts

Created December 14, 2021 06:18

StencilJS Custom State Provider

	import { forceUpdate } from '@stencil/core';

	interface Todo {
	completed: boolean;
	name: string;
	date: Date;
	id: string;
	}

	interface State {

SigurdMW / zod-to-final-form-error.ts

Created March 1, 2021 11:15

	import merge from "lodash/merge"
	import * as z from "zod"

	const recursiveError = (arr: Array<string \| number>, lastError: string[] \| object): any => {
	if (!arr \|\| arr.length === 0) {
	return lastError
	}
	const [currPath, ...iss] = arr
	let newErr
	if (typeof currPath === "string") {

SigurdMW / README.md

Last active June 17, 2020 10:18

Test

Testing tools

SigurdMW / vue-dropdown.vue

Created May 16, 2018 11:20

Accessible dropdown for vue

SigurdMW / vue-autocomplete.vue

Last active May 15, 2018 12:06

	<template>
	<div class="autocomplete">
	<label :for="inputId">{{ label }}</label>
	<div class="autocomplete__input-group" :class="{ 'autocomplete__input-group--error': validatonMessage }">
	<input
	type="text"
	:name="inputName"
	:id="inputId"
	autocomplete="off"
	aria-autocomplete="list"

SigurdMW / Collapse-group.js

Last active April 30, 2018 11:11

accessible collapse and collapse group for keyboard usage

	class Accordation {
	constructor ({ el, openOnLoad = false, id }) {
	this.el = el;
	this.openOnLoad = openOnLoad;
	this.id = id;

	this.trigger = null;
	this.body = null;
	this.isOpen = openOnLoad;

SigurdMW / toast.js

Created April 26, 2018 06:52

light weight, pure js, no dependencies js toast

	function createHtmlEl (type, { classes, text, attributes }) {
	const el = document.createElement(type);
	if (classes) {
	classes.map(classToAdd => {
	el.classList.add(classToAdd);
	});
	}

	if (attributes) {
	attributes.map(attr => {

SigurdMW / vue-tabs.vue

Created April 24, 2018 08:15

accessible vue tab list

	<template>
	<div class="tabs">
	<ul role="tablist" class="tabs__list">
	<li role="presentation" v-for="(tab, key) in children" :key="key" class="tabs__list-item">
	<a
	:href="'#' + tab.id"
	role="tab"
	:aria-controls="tab.id"
	:id="tab.trigger"
	class="tabs__link"

SigurdMW / vue-modal.vue

Last active May 23, 2018 12:02

Accessible vue modal in pure js

SigurdMW / email.php

Created February 8, 2018 08:17

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<!-- thanks to Mailchimp: https://github.com/mailchimp/email-blueprints/blob/master/responsive-templates/base_boxed_basic_query.html -->
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>@yield('title')</title>
	<style type="text/css">
	/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
	#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
	.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */

	<template>
	<div
	class="dropdown"
	:class="{ 'dropdown--open': isOpen }"
	v-click-outside="closeDropdown"
	>
	<button
	class="dropdown__button"
	type="button"
	@click="toggle"

	<template>
	<div class="modal" :class="{ 'modal--open': isOpen }" role="dialog" tabindex="-1" :aria-labelledby="id">
	<div class="modal__content">
	<div class="modal__header">
	<div class="modal__header-left">
	<h2 class="modal__heading" :class="{ 'sr-only': headingIsSrOnly }" :id="id">{{ heading }}</h2>
	<slot name="header"></slot>
	</div>
	<div class="modal__header-right">
	<button class="modal__close" @click="closeModal" aria-label="Closed modal">