Merge pull request #4116 from balancer/release/1.121.0

Release 1.121.0

Author: timjrobinson

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@balancer/frontend-v2",
-  "version": "1.120.28",
+  "version": "1.121.0",
   "engines": {
     "node": "=16",
     "npm": ">=8"
@@ -100,6 +100,8 @@
     "bnc-sdk": "^3.7.1",
     "buffer": "^6.0.3",
     "cac": "^6.7.14",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
     "color": "^4.2.3",
     "color.js": "^1.2.0",
     "date-fns": "^2.21.1",
@@ -138,6 +140,7 @@
     "stylelint-config-tailwindcss": "^0.0.7",
     "stylelint-prettier": "^2.0.0",
     "tailwind-config-viewer": "^1.7.2",
+    "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.4",
     "ua-parser-js": "^1.0.35",

package.json

@@ -112,3 +112,25 @@
 .appear-leave-active {
   @apply transition-all duration-200 ease-in;
 }
+
+/* POP */
+.pop-enter-active {
+  animation: pop 0.5s;
+}
+
+.pop-leave-active {
+  animation: pop 0.25s reverse;
+}
+@keyframes pop {
+  0% {
+    transform: scale(0);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

src/assets/css/global/animations.css

@@ -51,6 +51,7 @@ type Props = {
   loading?: boolean;
   loadingLabel?: string;
   disabled?: boolean;
+  justifyContent?: 'start' | 'center' | 'end' | 'between';
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -66,6 +67,7 @@ const props = withDefaults(defineProps<Props>(), {
   loading: false,
   loadingLabel: 'loading...',
   disabled: false,
+  justifyContent: 'center',
 });
 
 const sizeClasses = computed(() => {
@@ -185,6 +187,11 @@ const displayClasses = computed(() => {
   return 'inline-block';
 });
 
+const contentClasses = computed(() => {
+  if (!props.justifyContent) return 'justify-center';
+  return `justify-${props.justifyContent}`;
+});
+
 const shapeClasses = computed(() => {
   if (props.circle || props.rounded) return 'rounded-full';
   return 'rounded-lg';
@@ -234,7 +241,7 @@ const iconColor = computed(() => {
         {{ loadingLabel }}
       </span>
     </div>
-    <div v-else class="content">
+    <div v-else :class="['content', contentClasses]">
       <span v-if="label">
         {{ label }}
       </span>
@@ -260,6 +267,6 @@ const iconColor = computed(() => {
 }
 
 .content {
-  @apply flex justify-center items-center w-full h-full;
+  @apply flex items-center w-full h-full;
 }
 </style>

src/components/_global/BalBtn/BalBtn.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { VariantProps, cva } from 'class-variance-authority';
+import {
+  alignItemVariants,
+  cn,
+  justifyVariants,
+  paddingVariants,
+  widthVariants,
+  xSpacingVariants,
+} from '@/lib/utils/styles';
+
+const variants = cva('flex flex-row', {
+  variants: {
+    justify: justifyVariants,
+    align: alignItemVariants,
+    spacing: xSpacingVariants,
+    padd: paddingVariants,
+    width: widthVariants,
+  },
+});
+
+type Props = VariantProps<typeof variants>;
+
+defineProps<{
+  justify?: Props['justify'];
+  align?: Props['align'];
+  spacing?: Props['spacing'];
+  padd?: Props['padd'];
+  width?: Props['width'];
+}>();
+</script>
+
+<template>
+  <div :class="cn(variants({ justify, align, spacing, padd, width }))">
+    <slot />
+  </div>
+</template>

src/components/_global/BalHStack/BalHStack.vue

@@ -15,7 +15,7 @@
           v-bind="$attrs"
           @change="onChange"
         >
-          <option v-if="defaultText" value="" hidden>
+          <option v-if="defaultText" value selected>
             {{ defaultText }}
           </option>
           <option

src/components/_global/BalSelectInput/BalSelectInput.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { VariantProps, cva } from 'class-variance-authority';
+import { cn } from '@/lib/utils/styles';
+
+const variants = cva('flex flex-row items-center font-medium rounded-full', {
+  variants: {
+    color: {
+      blue: 'bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-600 text-blue-500 dark:text-blue-300',
+    },
+    size: {
+      md: 'shadow-sm text-sm py-1 px-2 space-x-1',
+    },
+  },
+  defaultVariants: {
+    color: 'blue',
+    size: 'md',
+  },
+});
+
+type TagVariantProps = VariantProps<typeof variants>;
+
+withDefaults(
+  defineProps<{
+    color?: TagVariantProps['color'];
+    size?: TagVariantProps['size'];
+    closeable?: boolean;
+    iconSize?: 'xs' | 'sm' | 'md' | 'lg';
+  }>(),
+  {
+    iconSize: 'xs',
+  }
+);
+
+const emit = defineEmits(['closed']);
+</script>
+
+<template>
+  <BalHStack :class="cn(variants({ color, size }))">
+    <slot />
+    <BalIcon
+      v-if="closeable"
+      name="x"
+      :size="iconSize"
+      class="cursor-pointer"
+      @click="emit('closed')"
+    />
+  </BalHStack>
+</template>