itube-specs 0.0.873 → 0.0.874

package/components/ui/chips.vue

@@ -3,7 +3,7 @@
     :is="component"
     :class="{
       '--active': isActive,
-      '--image': !!item.image,
+      [`--image-${imageFit}`]: !!item.image,
       '--alphabet': alphabet,
       '--small': mini,
       '--micro': micro,
@@ -25,10 +25,11 @@
       v-if="item.image"
       :src="item.image"
       :alt="name"
+      :class="`--${imageFit}`"
+      :width="imageBox.width"
+      :height="imageBox.height"
       class="ui-chips__img"
       sizes="20px sm:24px"
-      width="20"
-      height="20"
     />
     {{ name }}
     <UiIcon
@@ -63,6 +64,12 @@ const emit = defineEmits<{
 
 const route = useRoute();
 
+const imageFit = computed(() => props.item.imageFit ?? 'cover');
+
+const imageBox = computed(() => imageFit.value === 'contain'
+  ? { width: 22, height: 16 }
+  : { width: 20, height: 20 });
+
 const component = computed(() => {
   if (props.isLink) {
     if (isActive.value && props.alphabet) {
@@ -237,15 +244,24 @@ const name = computed(() => {
 }
 
 .ui-chips__img {
+  flex-shrink: 0;
+}
+
+.ui-chips__img.--cover {
   width: var(--chips-height);
   height: var(--chips-height);
-  flex-shrink: 0;
   object-fit: cover;
   object-position: center 70%;
   border-radius: 0 $radius-small $radius-small 0;
 }
 
-.ui-chips.--image {
+.ui-chips__img.--contain {
+  width: 22px;
+  height: 16px;
+  object-fit: contain;
+}
+
+.ui-chips.--image-cover {
   padding-left: 0;
   overflow: hidden;
 }

package/components/view/video.vue

@@ -159,6 +159,7 @@ const categoriesChips = computed((): IChipsItem[] => props.data.categories && pr
   title: item.title,
   value: item.name,
   image: item.icon ? `/icons/flags/${item.icon}.svg` : undefined,
+  imageFit: 'contain',
   prefix: 'categories',
 })));
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.873",
+  "version": "0.0.874",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

package/types/chips-item.d.ts

@@ -1,3 +1,5 @@
+export type ChipsImageFits = 'cover' | 'contain'
+
 export interface IChipsItem {
   title: string
   value?: string | string[] | number
@@ -7,4 +9,5 @@ export interface IChipsItem {
   key?: string
   query?: string
   image?: string
+  imageFit?: ChipsImageFits
 }