@bagelink/vue 1.14.15 → 1.15.0

package/src/components/Pill.vue

@@ -1,150 +0,0 @@
-<script setup lang="ts">
-defineOptions({ name: 'BglPill' })
-import type { IconType, ThemeType } from '@bagelink/vue'
-import type { SetupContext } from 'vue'
-import { Btn, Icon } from '@bagelink/vue'
-import { computed, useSlots } from 'vue'
-import '../styles/base-colors.css'
-
-interface BtnProp {
-	icon?: IconType
-	onClick: () => void
-	value?: string
-}
-
-const props = defineProps<{
-	disabled?: boolean
-	icon?: IconType
-	iconEnd?: IconType
-	color?: ThemeType
-	theme?: ThemeType
-	flat?: boolean
-	border?: boolean
-	outline?: boolean
-	loading?: boolean
-	value?: string
-	modelValue?: string
-	round?: boolean
-	btn?: BtnProp
-	btnEnd?: BtnProp
-	large?: boolean
-	small?: boolean
-	uppercase?: boolean
-}>()
-
-const slots: SetupContext['slots'] = useSlots()
-
-const computedTheme = computed(
-	() => {
-		if (props.disabled) { return 'gray-light' }
-		return (props.color || props.theme) as ThemeType
-	},
-)
-
-const computedPairClass = computed(() => {
-	const theme = computedTheme.value
-	if (!theme) return 'pair-primary'
-	return `pair-${theme}`
-})
-
-const computedClasses = computed(() => {
-	const classes: Record<string, boolean> = {
-		'bgl_pill': !props.icon || !!slots.default || !!props.value,
-		'round': props.round,
-		'bgl_flatPill': props.flat,
-		'bgl_pill-border': props.border || props.outline,
-		'pillLarge': props.large,
-		'pillSmall': props.small,
-	}
-
-	// Add the pair class
-	classes[computedPairClass.value] = true
-
-	return classes
-})
-</script>
-
-<template>
-	<div
-		class="bgl_pill"
-		style="height: var(--bgl-pill-height);"
-		:disabled="disabled"
-		:class="computedClasses"
-	>
-		<div class="flex h-100 justify-content-center relative ">
-			<div v-if="loading" class="loading absolute inset-0 mx-auto" />
-			<div class="px-025 flex gap-025 justify-content-center" :class="{ 'opacity-0': loading }">
-				<Btn v-if="btn" class="bgl_pill-btn -ms-025" icon-size="0.8" round v-bind="btn" />
-				<Icon v-if="icon" class="line-height-0" :icon="icon" style="font-size: var(--bgl-pill-font-size)" />
-				<slot :class="{ uppercase }" />
-				<template v-if="!slots.default">
-					<p class="pillText inline" :class="{ uppercase }">
-						{{ slots.default ? slots.default : value || modelValue }}
-					</p>
-				</template>
-				<Icon v-if="iconEnd" class="line-height-0" :icon="iconEnd" style="font-size: var(--bgl-pill-font-size)" />
-				<Btn v-if="btnEnd" class="bgl_pill-btn -me-025" icon-size="0.8" round v-bind="btnEnd" />
-			</div>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-.pillLarge{
-	--bgl-pill-font-size: var(--bgl-font-size);
-	--bgl-pill-height:auto;
-}
-.pillSmall{
-	--bgl-pill-font-size: 9px;
-	--bgl-pill-height:15px;
-}
-.pillText{
-	font-size: var(--bgl-pill-font-size);
-}
-.bgl_pill-btn{
-	color: var(--bgl-pill-btn-color);
-	background: var(--bgl-pill-btn-bg);
-	width: calc(var(--bgl-pill-height) / 1.25)!important;
-	height: calc(var(--bgl-pill-height) / 1.25)!important;
-}
-.loading {
-  border: 1px solid var(--bgl-light-text);
-  border-bottom: 2px solid var(--bgl-light-text);
-  animation: spin 1s linear infinite;
-  border-radius: 100px;
-  width: 1rem;
-  height: 1rem;
-  margin: auto;
-}
-.bgl_flatPill .loading {
-	border-bottom: 2px solid var(--bgl-text-color);
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.bgl_pill {
-  padding-inline: calc(var(--bgl-pill-font-size) / 6);
-  padding-block: calc(var(--bgl-pill-font-size) / 24);
-transition: var(--bgl-transition);
-  display: inline-block;
-  margin-inline-end: 0.25rem;
-  border-radius: var(--bgl-pill-border-radius);
-  min-height: var(--bgl-pill-height);
-vertical-align: middle;
-}
-
-.bgl_pill[disabled="true"] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.bgl_pill.round {
-	border-radius: 1000px;
-}
-</style>