example-arbitrary-value.vue

example-arbitrary-value.vue

//IconsDocumentDuo Component
<template>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
    <path
      :class="[primary]"
      d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64z"
    />
    <path
      :class="[secondary]"
      d="M224 0L384 160H256c-17.7 0-32-14.3-32-32V0z"
    />
  </svg>
</template>
<script setup lang="ts">
  const props = defineProps({
    primary: {
      type: String,
      default: "fill-zinc-500",
    },
    secondary: {
      type: String,
      default: "fill-white",
    },
  });
</script>


// Parent Component Example
<template>
<tbody class="divide-y divide-gray-200 bg-white">
      <tr
        v-for="row in rows"
        :key="row.id"
        class="group"
      >
        <td
          v-for="column in columns"
          :key="column.key"
          class="whitespace-nowrap px-2 py-1.5 text-sm text-zinc-800 font-normal tracking-wide group-hover:bg-zinc-50 cursor-pointer"
        >
<div
  v-if="column.key === 'file_name'"
  class="font-mono text-zinc-900 items-center flex"
>
  <div
    :class="[
      'p-2 rounded-md mr-2',
      getFileClasses(row[column.key]).secondaryColor,
    ]"
  >
    <IconsDocumentDuo
      :class="['h-3 w-3']"
      :primary="getFileClasses(row[column.key]).primaryColor"
    />
  </div>
  {{ row[column.key] }}
</div>
</td>
</tr>
</tbody>
</template>
<script setup lang="ts">

const getFileClasses = computed(() => (fileName) => {
    const extension = fileName.split(".").pop().toLowerCase();
    const classes = allDocTypes[extension] || allDocTypes["default"];

    return {
      primaryColor: `fill-[${classes.primaryColor}]`,
      secondaryColor: `bg-[${classes.secondaryColor}]`,
    };
  });
</script>