From 9384f5399da39e53855beb8e7f8ded1aa56bf72e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 27 Dec 2022 14:36:33 +0900
Subject: rename: client -> frontend

---
 packages/client/src/components/MkButton.vue | 227 ----------------------------
 1 file changed, 227 deletions(-)
 delete mode 100644 packages/client/src/components/MkButton.vue

(limited to 'packages/client/src/components/MkButton.vue')

diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
deleted file mode 100644
index 891645bb2a..0000000000
--- a/packages/client/src/components/MkButton.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-<template>
-<button
-	v-if="!link"
-	ref="el" class="bghgjjyj _button"
-	:class="{ inline, primary, gradate, danger, rounded, full }"
-	:type="type"
-	@click="emit('click', $event)"
-	@mousedown="onMousedown"
->
-	<div ref="ripples" class="ripples"></div>
-	<div class="content">
-		<slot></slot>
-	</div>
-</button>
-<MkA
-	v-else class="bghgjjyj _button"
-	:class="{ inline, primary, gradate, danger, rounded, full }"
-	:to="to"
-	@mousedown="onMousedown"
->
-	<div ref="ripples" class="ripples"></div>
-	<div class="content">
-		<slot></slot>
-	</div>
-</MkA>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
-
-const props = defineProps<{
-	type?: 'button' | 'submit' | 'reset';
-	primary?: boolean;
-	gradate?: boolean;
-	rounded?: boolean;
-	inline?: boolean;
-	link?: boolean;
-	to?: string;
-	autofocus?: boolean;
-	wait?: boolean;
-	danger?: boolean;
-	full?: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'click', payload: MouseEvent): void;
-}>();
-
-let el = $ref<HTMLElement | null>(null);
-let ripples = $ref<HTMLElement | null>(null);
-
-onMounted(() => {
-	if (props.autofocus) {
-		nextTick(() => {
-			el!.focus();
-		});
-	}
-});
-
-function distance(p, q): number {
-	return Math.hypot(p.x - q.x, p.y - q.y);
-}
-
-function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY): number {
-	const origin = { x: circleCenterX, y: circleCenterY };
-	const dist1 = distance({ x: 0, y: 0 }, origin);
-	const dist2 = distance({ x: boxW, y: 0 }, origin);
-	const dist3 = distance({ x: 0, y: boxH }, origin);
-	const dist4 = distance({ x: boxW, y: boxH }, origin);
-	return Math.max(dist1, dist2, dist3, dist4) * 2;
-}
-
-function onMousedown(evt: MouseEvent): void {
-	const target = evt.target! as HTMLElement;
-	const rect = target.getBoundingClientRect();
-
-	const ripple = document.createElement('div');
-	ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
-	ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
-
-	ripples!.appendChild(ripple);
-
-	const circleCenterX = evt.clientX - rect.left;
-	const circleCenterY = evt.clientY - rect.top;
-
-	const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
-
-	window.setTimeout(() => {
-		ripple.style.transform = 'scale(' + (scale / 2) + ')';
-	}, 1);
-	window.setTimeout(() => {
-		ripple.style.transition = 'all 1s ease';
-		ripple.style.opacity = '0';
-	}, 1000);
-	window.setTimeout(() => {
-		if (ripples) ripples.removeChild(ripple);
-	}, 2000);
-}
-</script>
-
-<style lang="scss" scoped>
-.bghgjjyj {
-	position: relative;
-	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
-	display: block;
-	min-width: 100px;
-	width: max-content;
-	padding: 7px 14px;
-	text-align: center;
-	font-weight: normal;
-	font-size: 95%;
-	box-shadow: none;
-	text-decoration: none;
-	background: var(--buttonBg);
-	border-radius: 5px;
-	overflow: clip;
-	box-sizing: border-box;
-	transition: background 0.1s ease;
-
-	&:not(:disabled):hover {
-		background: var(--buttonHoverBg);
-	}
-
-	&:not(:disabled):active {
-		background: var(--buttonHoverBg);
-	}
-
-	&.full {
-		width: 100%;
-	}
-
-	&.rounded {
-		border-radius: 999px;
-	}
-
-	&.primary {
-		font-weight: bold;
-		color: var(--fgOnAccent) !important;
-		background: var(--accent);
-
-		&:not(:disabled):hover {
-			background: var(--X8);
-		}
-
-		&:not(:disabled):active {
-			background: var(--X8);
-		}
-	}
-
-	&.gradate {
-		font-weight: bold;
-		color: var(--fgOnAccent) !important;
-		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-
-		&:not(:disabled):hover {
-			background: linear-gradient(90deg, var(--X8), var(--X8));
-		}
-
-		&:not(:disabled):active {
-			background: linear-gradient(90deg, var(--X8), var(--X8));
-		}
-	}
-
-	&.danger {
-		color: #ff2a2a;
-
-		&.primary {
-			color: #fff;
-			background: #ff2a2a;
-
-			&:not(:disabled):hover {
-				background: #ff4242;
-			}
-
-			&:not(:disabled):active {
-				background: #d42e2e;
-			}
-		}
-	}
-
-	&:disabled {
-		opacity: 0.7;
-	}
-
-	&:focus-visible {
-		outline: solid 2px var(--focus);
-		outline-offset: 2px;
-	}
-
-	&.inline {
-		display: inline-block;
-		width: auto;
-		min-width: 100px;
-	}
-
-	> .ripples {
-		position: absolute;
-		z-index: 0;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		border-radius: 6px;
-		overflow: hidden;
-
-		::v-deep(div) {
-			position: absolute;
-			width: 2px;
-			height: 2px;
-			border-radius: 100%;
-			background: rgba(0, 0, 0, 0.1);
-			opacity: 1;
-			transform: scale(1);
-			transition: all 0.5s cubic-bezier(0,.5,0,1);
-		}
-	}
-
-	&.primary > .ripples ::v-deep(div) {
-		background: rgba(0, 0, 0, 0.15);
-	}
-
-	> .content {
-		position: relative;
-		z-index: 1;
-	}
-}
-</style>
-- 
cgit v1.2.3-freya