Skip to content

Instantly share code, notes, and snippets.

View monsat's full-sized avatar

TANAKA Kohji monsat

View GitHub Profile
@monsat
monsat / TimeLimit.vue
Last active November 21, 2023 10:52
The TimeLimit component is a versatile Vue.js component designed to display content only within a specified time range. This component is particularly useful in scenarios where you need to show or hide elements based on time constraints, such as limited-time offers, event announcements, or scheduled content.
<script setup lang="ts">
const props = defineProps<{
startAt?: Date | number
endAt?: Date | number
now?: Date | number
}>()
const isBetween = computed(() => {
const now = props.now ?? Date.now()
const startAt = props.startAt ?? now
@monsat
monsat / storedState.ts
Created May 14, 2023 14:08
Nuxt useState with VueUse useStorage composables
import { useStorage } from '@vueuse/core'
export const useStoredState = <T>(key: string, initValue: T) => {
const shared = useState<T>(key, () => initValue)
const stored = useStorage<T>(key, initValue)
const state = computed({
get: () => shared.value,
set: (value: T) => {
shared.value = value
@monsat
monsat / firebase.json
Created April 11, 2023 13:28
monorepo 環境で Firebase Cloud Functions の設定
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": [
{
"codebase": "backend",
"source": "packages/firebase-functions",
"ignore": [
@monsat
monsat / unwrapRef.test.ts
Last active April 6, 2023 11:48
オブジェクトの各プロパティについて unref/ref する
import { describe, expect, it, test, vi } from 'vitest'
import {
unwrapRefs,
wrapRefs,
} from './unwrapRef'
describe('unwrapRefs', () => {
it('should be enabled to use Ref', () => {
const source = {
@monsat
monsat / prettify.ts
Created April 6, 2023 10:41
Prettify
export type Prettify<T> = {
[K in keyof T]: T[K]
} & {}
@monsat
monsat / storableRef.ts
Created October 30, 2022 05:50
Add commit/restore storage method to Vue.js global state Ref
import { ref } from 'vue-demi'
import type { Ref, UnwrapRef } from 'vue-demi'
import { createGlobalState, useSessionStorage } from '@vueuse/core'
export type StorableRef<T> = Ref<T> & {
commit: () => void
restore: () => void
}
const createState = <T>(storageKey: string, initialValue: T) => createGlobalState(() => useSessionStorage(storageKey, initialValue))
@monsat
monsat / useState.ts
Last active September 19, 2022 03:15
useState Clone: Nuxt 3 useState composables for Nuxt 2 app
import { Ref } from 'vue'
import { createGlobalState, createSharedComposable } from '@vueuse/core'
const createBaseStore = <T>() => createGlobalState<Record<string, Ref<T>>>(() => reactive({}))
const useBaseStore = createSharedComposable(createBaseStore)
export const useState = <T>(key: string, init?: () => T): Ref<T> => {
const store = useBaseStore<T>()
const state = store[key]
@monsat
monsat / pickAndFilter.ts
Created May 18, 2021 23:34
配列に入ったオブジェクトのなかから指定の id のオブジェクトを取り出し、残りとともに返す関数(複数みつかった場合はエラー)
const pickAndFilter = <T extends { id: string }>(id: string, items: Array<T>): [T | undefined, T[]] => {
const picked: T[] = []
const remained = items.reduce((accumulator: T[], item) => {
if (item.id === id) {
picked.push(item)
} else {
accumulator.push(item)
}
return accumulator
}, [])
@monsat
monsat / footer.html
Created May 13, 2014 02:00
外部ドメインの場合は自動的に target=_blank を付与する(はてなブログ等で使用)
# -*- mode: ruby -*-
# vi: set ft=ruby :
# Vagrantfile API/syntax version. Don't touch unless you know what you're doing!
VAGRANTFILE_API_VERSION = "2"
Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
config.vm.box = "centos64_ja"
config.vm.box_url = "https://dl.dropboxusercontent.com/u/3657281/centos64_ja.box"
config.vm.hostname = "vagrant-test.local"