wip

pages/aigc/drawing/components/OptionBlock.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: String,
+    default: ''
+  },
+  comment: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <div class="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded-lg flex flex-col gap-1">
+    <div class="flex items-center gap-1 text-sm">
+      <UIcon v-if="icon" :name="icon" class="text-base inline-block"/>
+      <div class="flex-1 flex items-center truncate whitespace-nowrap overflow-hidden">
+        <span>{{ label }}</span>
+        <UTooltip v-if="comment" :popper="{ arrow: true, placement: 'top' }" :text="comment">
+          <UIcon class="text-base" name="i-tabler-help"/>
+        </UTooltip>
+      </div>
+      <slot name="actions"/>
+    </div>
+    <div>
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>