@bagelink/vue 0.0.302 → 0.0.308

package/src/components/Btn.vue

@@ -1,25 +1,23 @@
 <template>
-	<component
-		:is="to ? 'router-link' : is" :to="to" @click.stop="onClick" :type="type" :role="role" :disabled="disabled"
-		:class="{
-			'bgl_btn-icon': icon && !slots['default'] && !value,
-			bgl_btn: !icon || slots['default'] || value,
-			thin,
-			round,
-			'bgl_flatBtn': flat,
-			'bgl_btn-border': border
-		}"
-	>
-		<div class="loading" v-if="loading" />
-		<div v-else class="bgl_btn-flex">
-			<MaterialIcon v-if="icon" :icon="icon" />
-			<slot />
-			<template v-if="!slots['default'] && value">
-				{{ value }}
-			</template>
-			<MaterialIcon v-if="props['icon.end']" :icon="props['icon.end']" />
-		</div>
-	</component>
+  <component :is="to ? 'router-link' : is" :to="to" @click.stop="onClick" :type="type" :role="role" :disabled="disabled"
+    :class="{
+    'bgl_btn-icon': icon && !slots['default'] && !value,
+    bgl_btn: !icon || slots['default'] || value,
+    thin,
+    round,
+    'bgl_flatBtn': flat,
+    'bgl_btn-border': border
+  }">
+    <div class="loading" v-if="loading" />
+    <div v-else class="bgl_btn-flex">
+      <MaterialIcon v-if="icon" :icon="icon" />
+      <slot />
+      <template v-if="!slots['default'] && value">
+        {{ value }}
+      </template>
+      <MaterialIcon v-if="props['icon.end']" :icon="props['icon.end']" />
+    </div>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -30,224 +28,228 @@ import type { MaterialIcons, ThemeType } from '@bagelink/vue';
 import { MaterialIcon } from '@bagelink/vue';
 
 const props = withDefaults(
-	defineProps<{
-		disabled?: boolean;
-		icon?: MaterialIcons;
-		'icon.end'?: MaterialIcons;
-		color?: ThemeType;
-		theme?: ThemeType;
-		flat?: boolean;
-		border?: boolean;
-		thin?: boolean;
-		type?: 'button' | 'submit' | 'reset';
-		loading?: boolean;
-		role?: string;
-		value?: string;
-		to?: string;
-		round?: boolean;
-		is?: string;
-		onClick?: (e: MouseEvent) => void;
-	}>(),
-	{
-		onClick: () => '',
-		loading: false,
-		round: false,
-		disabled: false,
-		type: 'button',
-		role: 'button',
-		is: 'button',
-		border: false,
-	},
+  defineProps<{
+    disabled?: boolean;
+    icon?: MaterialIcons;
+    'icon.end'?: MaterialIcons;
+    color?: ThemeType;
+    theme?: ThemeType;
+    flat?: boolean;
+    border?: boolean;
+    thin?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    loading?: boolean;
+    role?: string;
+    value?: string;
+    to?: string;
+    round?: boolean;
+    is?: string;
+    onClick?: (e: MouseEvent) => void;
+  }>(),
+  {
+    onClick: () => '',
+    loading: false,
+    round: false,
+    disabled: false,
+    type: 'button',
+    role: 'button',
+    is: 'button',
+    border: false,
+  },
 );
 
 const computedTheme = $computed(
-	() => {
-		if (props.disabled) return 'gray-light';
-		return (props?.color || props?.theme);
-	},
+  () => {
+    if (props.disabled) return 'gray-light';
+    return (props?.color || props?.theme);
+  },
 );
 
 const computedDefaultColors = $computed(
-	() => ({
-		backgroundColor: 'var(--bgl-primary)',
-		color: props.flat ? 'var(--bgl-black)' : 'var(--bgl-white)',
-	}),
+  () => ({
+    backgroundColor: 'var(--bgl-primary)',
+    color: props.flat ? 'var(--bgl-black)' : 'var(--bgl-white)',
+  }),
 );
 
 function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof computedDefaultColors {
-	return ({
-		...computedDefaultColors,
-		...theme,
-		color: props.flat
-			? theme.backgroundColor as string
-			: theme.color as string,
-	});
+  return ({
+    ...computedDefaultColors,
+    ...theme,
+    color: props.flat
+      ? theme.backgroundColor as string
+      : theme.color as string,
+  });
 }
 
 const themes: { [key in ThemeType]: typeof computedDefaultColors } = {
-	red: getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
-	black: getThemeColors({ backgroundColor: 'var(--bgl-black)' }),
-	green: getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
-	primary: getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
-	gray: getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
-	light: getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
-	'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' }),
-	blue: getThemeColors({}),
+  red: getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
+  black: getThemeColors({ backgroundColor: 'var(--bgl-black)' }),
+  green: getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
+  primary: getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
+  gray: getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
+  light: getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
+  'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' }),
+  blue: getThemeColors({}),
 };
 
 const cumputedTextColor = $computed(
-	() => (themes?.[computedTheme as ThemeType]?.color || computedDefaultColors.color),
+  () => (themes?.[computedTheme as ThemeType]?.color || computedDefaultColors.color),
 );
 
 const computedBackgroundColor = $computed(
-	() => (themes?.[computedTheme as ThemeType]?.backgroundColor || computedDefaultColors.backgroundColor),
+  () => (themes?.[computedTheme as ThemeType]?.backgroundColor || computedDefaultColors.backgroundColor),
 );
 </script>
 
 <style scoped>
+a {
+  text-decoration: none;
+}
+
 .loading {
-	border: 1px solid var(--bgl-white);
-	border-bottom: 2px solid var(--bgl-white);
-	animation: spin 1s linear infinite;
-	border-radius: 100px;
-	width: 1rem;
-	height: 1rem;
-	margin: auto;
+  border: 1px solid var(--bgl-white);
+  border-bottom: 2px solid var(--bgl-white);
+  animation: spin 1s linear infinite;
+  border-radius: 100px;
+  width: 1rem;
+  height: 1rem;
+  margin: auto;
 }
 
 @keyframes spin {
-	0% {
-		transform: rotate(0deg);
-	}
+  0% {
+    transform: rotate(0deg);
+  }
 
-	100% {
-		transform: rotate(360deg);
-	}
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .bgl_btn-icon {
-	height: var(--btn-height);
-	width: var(--btn-height);
-	border-radius: 100%;
-	font-size: 1rem;
-	background: var(--bgl-primary);
-	color: var(--bgl-white);
-	flex-shrink: 0;
-	transition: var(--bgl-transition);
+  height: var(--btn-height);
+  width: var(--btn-height);
+  border-radius: 100%;
+  font-size: 1rem;
+  background: var(--bgl-primary);
+  color: var(--bgl-white);
+  flex-shrink: 0;
+  transition: var(--bgl-transition);
 }
 
 .bgl_btn {
-	padding-left: var(--btn-padding);
-	padding-right: var(--btn-padding);
-	transition: var(--bgl-transition);
-	text-decoration: none;
+  padding-left: var(--btn-padding);
+  padding-right: var(--btn-padding);
+  transition: var(--bgl-transition);
+  text-decoration: none;
 }
 
 .bgl_btn[disabled="true"] {
-	opacity: 0.5;
-	cursor: not-allowed;
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .bgl_btn-flex {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	justify-content: center;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  justify-content: center;
 }
 
 .bgl_btn .bgl_.bgl_icon-font {
-	font-size: calc(var(--input-font-size) * 1.3);
+  font-size: calc(var(--input-font-size) * 1.3);
 }
 
 .bgl_btn,
 .bgl_btn-icon {
-	background-color: v-bind(computedBackgroundColor);
-	color: v-bind(cumputedTextColor);
+  background-color: v-bind(computedBackgroundColor);
+  color: v-bind(cumputedTextColor);
 }
 
 .bgl_btn:hover,
 .bgl_btn-icon:hover {
-	filter: var(--bgl-hover-filter);
+  filter: var(--bgl-hover-filter);
 }
 
 .bgl_btn:active,
 .bgl_btn-icon:active {
-	filter: var(--bgl-active-filter);
+  filter: var(--bgl-active-filter);
 }
 
 .bgl_btn.bgl_flatBtn {
-	padding-left: var(--btn-padding);
-	padding-right: var(--btn-padding);
-	background: transparent;
+  padding-left: var(--btn-padding);
+  padding-right: var(--btn-padding);
+  background: transparent;
 }
 
 .bgl_btn-icon.bgl_flatBtn {
-	background: transparent;
+  background: transparent;
 }
 
 .bgl_btn.bgl_flatBtn:hover,
 .bgl_btn-icon.bgl_flatBtn:hover {
-	filter: var(--bgl-active-filter);
+  filter: var(--bgl-active-filter);
 }
 
 .bgl_btn.bgl_flatBtn:active,
 .bgl_btn-icon.bgl_flatBtn:active {
-	background: var(--bgl-white);
-	filter: var(--bgl-hover-filter);
+  background: var(--bgl-white);
+  filter: var(--bgl-hover-filter);
 }
 
 .bgl_btn.bgl_flatBtn.red,
 .bgl_btn-icon.bgl_flatBtn.red {
-	color: var(--bgl-red);
+  color: var(--bgl-red);
 }
 
 .bgl_btn.bgl_flatBtn.light,
 .bgl_btn-icon.bgl_flatBtn.light {
-	color: var(--bgl-primary-tint);
+  color: var(--bgl-primary-tint);
 }
 
 .bgl_btn.bgl_flatBtn.black,
 .bgl_btn-icon.bgl_flatBtn.black {
-	color: var(--bgl-black);
+  color: var(--bgl-black);
 }
 
 .bgl_btn.bgl_flatBtn.gray,
 .bgl_btn-icon.bgl_flatBtn.gray {
-	color: var(--bgl-gray);
+  color: var(--bgl-gray);
 }
 
 .bgl_btn.thin {
-	padding-left: calc(var(--btn-padding) / 2);
-	padding-right: calc(var(--btn-padding) / 2);
+  padding-left: calc(var(--btn-padding) / 2);
+  padding-right: calc(var(--btn-padding) / 2);
 }
 
 .bgl_btn.round {
-	border-radius: calc(var(--btn-border-radius) * 2);
+  border-radius: calc(var(--btn-border-radius) * 2);
 }
 
 .bgl_btn-icon.thin {
-	height: calc(var(--btn-height) / 1.5);
-	width: calc(var(--btn-height) / 1.5);
-	line-height: 1;
+  height: calc(var(--btn-height) / 1.5);
+  width: calc(var(--btn-height) / 1.5);
+  line-height: 1;
 }
 
 [dir="rtl"] .bgl_.bgl_icon-font {
-	transform: rotateY(180deg);
+  transform: rotateY(180deg);
 }
 
 .bgl_btn-border {
-	outline: 1px solid v-bind(computedBackgroundColor);
-	color: v-bind(computedBackgroundColor);
-	background: transparent;
+  outline: 1px solid v-bind(computedBackgroundColor);
+  color: v-bind(computedBackgroundColor);
+  background: transparent;
 }
 
 .bgl_btn-border:hover {
-	color: var(--bgl-white);
-	background: v-bind(computedBackgroundColor);
-	filter: brightness(100%);
+  color: var(--bgl-white);
+  background: v-bind(computedBackgroundColor);
+  filter: brightness(100%);
 }
 
 .bgl_btn-border:active {
-	filter: brightness(80%);
+  filter: brightness(80%);
 }
 </style>

package/src/components/Card.vue

@@ -1,14 +1,57 @@
 <template>
-	<div class="card" :class="{thin, border, 'h-100':h100, [bg||'']: bg}">
-		<slot/>
+	<div
+		class="bgl_card" :class="{
+			thin, border: outline,
+			'h-100': h100,
+			[bg || '']: bg,
+			'overflow-x': overflowX,
+			'overflow-y': overflowY
+		}"
+	>
+		<slot />
 	</div>
 </template>
 
 <script setup lang="ts">
 defineProps<{
   thin?: boolean;
-  border?: boolean;
+  outline?: boolean;
   h100?: boolean;
+  overflowX?: boolean;
+  overflowY?: boolean;
   bg?: 'gray' | 'light' | 'dark' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'white' | 'transparent';
 }>();
 </script>
+
+<style>
+.bgl_card {
+    border-radius: var(--card-border-radius);
+    background: var(--bgl-white);
+    padding: 2rem 2rem;
+}
+
+.bgl_card.gray {
+    background: var(--bgl-gray-20);
+}
+
+.bgl_card.border {
+    border: 1px solid var(--border-color);
+    background-color: transparent;
+}
+
+.bgl_card.thin {
+    padding: 1rem 1rem;
+}
+.bgl_card.BagelTable {
+    height: 100%;
+    overflow: auto;
+    padding-top: 0;
+}
+.bgl_card.thin .tabs {
+    margin-bottom: 1rem;
+}
+
+.bgl_card .bgl_card.tabs-top {
+    padding: 0;
+}
+</style>