From 0a3abbd894e1e6acd0c4b951c00c82254efcb14e Mon Sep 17 00:00:00 2001
From: Baku Hashimoto <mail@baku89.com>
Date: Thu, 28 Sep 2023 10:57:28 +0900
Subject: [PATCH] WIP

---
 src/components/App.vue         | 122 +++++++++-----------
 src/components/Tabs/Tab.vue    | 105 +++++++++++++++++
 src/components/Tabs/Tabs.vue   | 202 +++++++++++++++++++++++++++++++++
 src/components/Tabs/index.ts   |   4 +
 src/components/Tabs/symbols.ts |  11 ++
 src/components/Tabs/types.ts   |  40 +++++++
 src/components/Tabs/utils.ts   |  11 ++
 7 files changed, 427 insertions(+), 68 deletions(-)
 create mode 100644 src/components/Tabs/Tab.vue
 create mode 100644 src/components/Tabs/Tabs.vue
 create mode 100644 src/components/Tabs/index.ts
 create mode 100644 src/components/Tabs/symbols.ts
 create mode 100644 src/components/Tabs/types.ts
 create mode 100644 src/components/Tabs/utils.ts

diff --git a/src/components/App.vue b/src/components/App.vue
index dffe276..65120a6 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -30,6 +30,7 @@ import MonacoEditor, {ErrorInfo} from './MonacoEditor.vue'
 import OverlayColorPicker from './OverlayColorPicker.vue'
 import OverlayNumberSlider from './OverlayNumberSlider.vue'
 import OverlayPointHandle from './OverlayPointHandle.vue'
+import {Tab, Tabs} from './Tabs'
 
 const {refAppStorage} = useAppStorage('com.baku89.paperjs-editor')
 
@@ -332,47 +333,42 @@ window.addEventListener('drop', async e => {
 				/>
 			</div>
 			<FloatingPane name="inspector" icon="code">
-				<div class="inspector">
-					<div class="actions">
+				<Tabs class="inspector-tab">
+					<template #before-tablist>
 						<button class="play" @click="autoRefresh = !autoRefresh">
 							<span class="material-symbols-outlined">{{
 								autoRefresh ? 'pause_circle' : 'play_circle'
 							}}</span>
 							{{ autoRefresh ? 'Pause' : 'Resume' }}
 						</button>
-						<div class="spacer" />
-						<button @click="copyCanvasAsSVG">
-							<span class="material-symbols-outlined">content_copy</span>
-						</button>
-						<button @click="pasteSVGToCanvas">
-							<span class="material-symbols-outlined">content_paste</span>
-						</button>
-						<button @click="saveProject">
-							<span class="material-symbols-outlined">download</span>
-						</button>
-					</div>
-					<div class="editor-wrapper">
-						<MonacoEditor
-							v-model="code"
-							v-model:cursorIndex="cursorIndex"
-							v-model:cursorPosition="cursorPosition"
-							class="editor"
-							:errors="errors"
-						/>
-						<OverlayColorPicker
-							v-model:code="code"
-							v-model:visible="colorPickerVisible"
-							:cursor-index="cursorIndex"
-							:cursor-position="cursorPosition"
-						/>
-						<OverlayNumberSlider
-							v-show="!colorPickerVisible"
-							v-model:code="code"
-							v-model:cursorIndex="cursorIndex"
-							:cursor-position="cursorPosition"
-						/>
-					</div>
-				</div>
+					</template>
+					<Tab name="Settings">
+						<div>Settings</div>
+					</Tab>
+					<Tab name="Code" class="inspector">
+						<div class="editor-wrapper">
+							<MonacoEditor
+								v-model="code"
+								v-model:cursorIndex="cursorIndex"
+								v-model:cursorPosition="cursorPosition"
+								class="editor"
+								:errors="errors"
+							/>
+							<OverlayColorPicker
+								v-model:code="code"
+								v-model:visible="colorPickerVisible"
+								:cursor-index="cursorIndex"
+								:cursor-position="cursorPosition"
+							/>
+							<OverlayNumberSlider
+								v-show="!colorPickerVisible"
+								v-model:code="code"
+								v-model:cursorIndex="cursorIndex"
+								:cursor-position="cursorPosition"
+							/>
+						</div>
+					</Tab>
+				</Tabs>
 			</FloatingPane>
 		</main>
 	</div>
@@ -448,7 +444,30 @@ window.addEventListener('drop', async e => {
 	background-image radial-gradient(circle at 0 0, var(--dot-color) 1px, transparent 0), linear-gradient(to bottom, var(--axis-color) 1px, transparent 0), linear-gradient(to right, var(--axis-color) 1px, transparent 0)
 	background-repeat repeat, repeat-x, repeat-y
 
+.inspector-tab
+	height 100%
 
+.play
+	display inline-flex
+	justify-content center
+	align-items center
+	background var(--ui-button)
+	color var(--ui-color)
+	width 32px
+	height 32px
+	border-radius 9999px
+	vertical-align middle
+	padding 0 6px
+	gap .4em
+	transition all ease .2s
+	width auto
+	padding 0 12px 0 6px
+	background var(--ui-color)
+	color var(--ui-bg)
+
+	&:hover
+		background var(--ui-accent)
+		color var(--ui-bg)
 
 .inspector
 	position relative
@@ -456,39 +475,6 @@ window.addEventListener('drop', async e => {
 	display flex
 	flex-direction column
 	gap 1rem
-
-.actions
-	display flex
-	align-items center
-	gap 0.5rem
-
-	.spacer
-		flex-grow 1
-
-	button
-		display inline-flex
-		justify-content center
-		align-items center
-		background var(--ui-button)
-		color var(--ui-color)
-		width 32px
-		height 32px
-		border-radius 9999px
-		vertical-align middle
-		padding 0 6px
-		gap .4em
-		transition all ease .2s
-
-		&.play
-			width auto
-			padding 0 12px 0 6px
-			background var(--ui-color)
-			color var(--ui-bg)
-
-		&:hover
-			background var(--ui-accent)
-			color var(--ui-bg)
-
 .editor-wrapper
 	position relative
 	flex-grow 1
diff --git a/src/components/Tabs/Tab.vue b/src/components/Tabs/Tab.vue
new file mode 100644
index 0000000..dc9154b
--- /dev/null
+++ b/src/components/Tabs/Tab.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import {
+	defineProps,
+	onBeforeMount,
+	onBeforeUnmount,
+	ref,
+	watch,
+	withDefaults,
+} from 'vue'
+
+import {AddTabKey, DeleteTabKey, TabsProviderKey, UpdateTabKey} from './symbols'
+import {injectStrict} from './utils'
+
+type Props = {
+	id?: string
+	name: string
+	prefix?: string
+	suffix?: string
+	isDisabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	id: undefined,
+	isDisabled: false,
+})
+
+const isActive = ref(false)
+
+const tabsProvider = injectStrict(TabsProviderKey)
+const addTab = injectStrict(AddTabKey)
+const updateTab = injectStrict(UpdateTabKey)
+const deleteTab = injectStrict(DeleteTabKey)
+
+const header = props.prefix + props.name + props.suffix
+const computedId = props.id
+	? props.id
+	: props.name.toLowerCase().replace(/ /g, '-')
+const paneId = computedId + '-pane'
+
+watch(
+	() => tabsProvider.activeTabName,
+	() => {
+		isActive.value = hash.value === tabsProvider.activeTabName
+	}
+)
+
+watch(
+	() => Object.assign({}, props),
+	() => {
+		updateTab(computedId, {
+			name: props.name,
+			header: props.prefix + props.name + props.suffix,
+			isDisabled: props.isDisabled,
+			index: tabsProvider.tabs.length,
+			computedId: computedId,
+			paneId: paneId,
+		})
+	}
+)
+
+onBeforeMount(() => {
+	addTab({
+		name: props.name,
+		header: header,
+		isDisabled: props.isDisabled,
+		hash: hash.value,
+		index: tabsProvider.tabs.length,
+		computedId: computedId,
+		paneId: paneId,
+	})
+})
+
+onBeforeUnmount(() => {
+	deleteTab(computedId)
+})
+
+defineExpose({
+	header,
+	computedId,
+	paneId,
+	hash,
+	isActive,
+})
+</script>
+
+<template>
+	<section
+		v-show="isActive"
+		:id="paneId"
+		ref="tab"
+		class="Tab"
+		:data-tab-id="computedId"
+		:aria-hidden="!isActive"
+		role="tabpanel"
+		tabindex="-1"
+	>
+		<slot />
+	</section>
+</template>
+
+<style lang="stylus" scoped>
+
+.Tab
+	height 100%
+</style>
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
new file mode 100644
index 0000000..491e998
--- /dev/null
+++ b/src/components/Tabs/Tabs.vue
@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import {
+	computed,
+	defineProps,
+	onMounted,
+	provide,
+	reactive,
+	toRefs,
+	withDefaults,
+} from 'vue'
+
+import {AddTabKey, DeleteTabKey, TabsProviderKey, UpdateTabKey} from './symbols'
+import {Tab, TabsState} from './types'
+type Props = {
+	id?: string
+	cacheLifetime?: number
+	options?: {
+		storageKey?: string
+		defaultTabHash?: string
+	}
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	id: undefined,
+	options: () => ({
+		storageKey: undefined,
+		defaultTabHash: undefined,
+	}),
+})
+
+const emit = defineEmits<{
+	changed: [tab: Tab]
+	clicked: [tab: Tab]
+}>()
+
+const state: TabsState = reactive({
+	activeTabHash: '',
+	lastActiveTabHash: '',
+	tabs: [] as Tab[],
+})
+
+provide(TabsProviderKey, state)
+
+provide(AddTabKey, tab => {
+	state.tabs.push(tab)
+})
+
+provide(UpdateTabKey, (computedId: string, data: Tab) => {
+	const tabIndex = state.tabs.findIndex(tab => tab.computedId === computedId)
+
+	data.isActive = state.tabs[tabIndex].isActive
+
+	state.tabs[tabIndex] = data
+})
+
+provide(DeleteTabKey, computedId => {
+	const tabIndex = state.tabs.findIndex(tab => tab.computedId === computedId)
+
+	state.tabs.splice(tabIndex, 1)
+})
+
+const storageKey = computed(() => {
+	if (props.options.storageKey) {
+		return props.options.storageKey
+	} else if (props.id) {
+		return `vue-tabs-component.${props.id}.cache.${window.location.host}${window.location.pathname}`
+	} else {
+		return `vue-tabs-component.cache.${window.location.host}${window.location.pathname}`
+	}
+})
+
+const selectTab = (selectedTabHash: string, event?: Event): void => {
+	const selectedTab = findTab(selectedTabHash)
+
+	if (!selectedTab) {
+		return
+	}
+
+	if (event && selectedTab.isDisabled) {
+		event.preventDefault()
+		return
+	}
+
+	if (state.lastActiveTabHash === selectedTab.hash) {
+		emit('clicked', selectedTab)
+		return
+	}
+
+	state.tabs.forEach(tab => {
+		tab.isActive = tab.hash === selectedTab.hash
+	})
+
+	emit('changed', selectedTab)
+
+	state.lastActiveTabHash = state.activeTabName = selectedTab.hash
+
+	localStorage.set(storageKey.value, selectedTab.hash)
+}
+
+const findTab = (hash: string): Tab | undefined => {
+	return state.tabs.find(tab => tab.hash === hash)
+}
+
+onMounted(() => {
+	if (!state.tabs.length) {
+		return
+	}
+
+	const previousSelectedTabHash = localStorage.get(storageKey.value)
+
+	if (previousSelectedTabHash !== null && findTab(previousSelectedTabHash)) {
+		selectTab(previousSelectedTabHash)
+		return
+	}
+
+	if (
+		props.options.defaultTabHash &&
+		findTab('#' + props.options.defaultTabHash)
+	) {
+		selectTab('#' + props.options.defaultTabHash)
+		return
+	}
+
+	selectTab(state.tabs[0].hash)
+})
+
+defineExpose({
+	...toRefs(state),
+	selectTab,
+	findTab,
+})
+</script>
+
+<template>
+	<div class="Tabs">
+		<div class="tablist-wrapper">
+			<div clas="before-tablist">
+				<slot name="before-tablist" />
+			</div>
+			<ul role="tablist" class="tablist">
+				<li
+					v-for="(tab, i) in state.tabs"
+					:key="i"
+					class="tablist-item"
+					:class="{disabled: tab.isDisabled, active: tab.isActive}"
+					role="presentation"
+				>
+					<a
+						class="tablist-link"
+						:class="{disabled: tab.isDisabled, active: tab.isActive}"
+						role="tab"
+						:aria-controls="tab.paneId"
+						:aria-selected="tab.isActive"
+						tabindex="0"
+						@click="selectTab(tab.hash, $event)"
+						>{{ tab.header }}</a
+					>
+				</li>
+			</ul>
+		</div>
+		<div class="panels-wrapper">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<style lang="stylus" scoped>
+.Tabs
+	display grid
+	gap .5rem
+	grid-template-columns 1fr
+	grid-template-rows min-content 1fr
+
+.tablist-wrapper
+	display flex
+	gap 1rem
+
+.tablist
+	display flex
+	gap .2rem
+	list-style-type none
+	user-select none
+
+.tablist-item
+	line-height 2rem
+	padding 0 .4rem
+	font-weight bold
+	border-bottom 3px solid transparent
+	transition border-bottom-color .2s ease
+
+	&.active
+		border-bottom-color var(--ui-color)
+
+.tablist-link
+	text-decoration none
+	color var(--ui-color)
+	opacity .4
+	transition opacity .2s ease
+
+	&.active
+		opacity 1
+</style>
diff --git a/src/components/Tabs/index.ts b/src/components/Tabs/index.ts
new file mode 100644
index 0000000..db696e5
--- /dev/null
+++ b/src/components/Tabs/index.ts
@@ -0,0 +1,4 @@
+import Tab from './Tab.vue'
+import Tabs from './Tabs.vue'
+
+export {Tab, Tabs}
diff --git a/src/components/Tabs/symbols.ts b/src/components/Tabs/symbols.ts
new file mode 100644
index 0000000..52f9bfc
--- /dev/null
+++ b/src/components/Tabs/symbols.ts
@@ -0,0 +1,11 @@
+import {InjectionKey} from 'vue'
+
+import {AddTab, DeleteTab, TabsState, UpdateTab} from './types'
+
+export const AddTabKey: InjectionKey<AddTab> = Symbol('addTab')
+
+export const UpdateTabKey: InjectionKey<UpdateTab> = Symbol('updateTab')
+
+export const DeleteTabKey: InjectionKey<DeleteTab> = Symbol('deleteTab')
+
+export const TabsProviderKey: InjectionKey<TabsState> = Symbol('tabsProvider')
diff --git a/src/components/Tabs/types.ts b/src/components/Tabs/types.ts
new file mode 100644
index 0000000..f854a7f
--- /dev/null
+++ b/src/components/Tabs/types.ts
@@ -0,0 +1,40 @@
+export interface PushTabOptions {
+	name: string
+	header: string
+	isDisabled: boolean
+	index: number
+	computedId: string
+	paneId: string
+}
+
+export interface Tab extends PushTabOptions {
+	id?: string
+	prefix?: string
+	suffix?: string
+	isActive?: boolean
+}
+
+export interface Tabs {
+	cacheLifetime: number
+	options: {
+		useUrlFragment?: boolean
+		defaultTabHash?: string | null
+	}
+}
+
+export interface TabsState {
+	activeTabName: string
+	lastActiveTabHash: string
+	tabs: Array<Tab>
+}
+
+export type AddTab = (tab: PushTabOptions) => void
+
+export type UpdateTab = (computedId: string, tab: PushTabOptions) => void
+
+export type DeleteTab = (computedId: string) => void
+
+export interface ExpiringStorage {
+	get(key: string): string | null
+	set(key: string, value: string, ttl: number): void
+}
diff --git a/src/components/Tabs/utils.ts b/src/components/Tabs/utils.ts
new file mode 100644
index 0000000..c5f37f9
--- /dev/null
+++ b/src/components/Tabs/utils.ts
@@ -0,0 +1,11 @@
+import {inject, InjectionKey} from 'vue'
+
+export function injectStrict<T>(key: InjectionKey<T>, fallback?: T) {
+	const resolved = inject(key, fallback)
+
+	if (typeof resolved === 'undefined') {
+		throw new Error(`Could not resolve ${key.description}`)
+	}
+
+	return resolved
+}