Add dropdown menu to icon cells

xingrz · Mar 29, 2024 · e5f8048 · e5f8048
1 parent 3296ab1
commit e5f8048
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 6 deletions.
diff --git a/src/components/BSMap/BSCell.vue b/src/components/BSMap/BSCell.vue
@@ -1,20 +1,31 @@
 <template>
-  <BSSelectable v-slot="{ selectable }" :row="props.row" :offset="props.offset" :length="props.content.length">
-    <div :class="[selectable, $style.cell]" :title="content" @click="handleClick" :style="style">
-      <BSIcon v-for="(icon, index) in (parts?.icons || [])" :key="index" :content="icon" :stacked="stacked"
-        @ratio="(ratio: number) => updateRatio(index, ratio)" />
-    </div>
+  <BSSelectable v-slot="{ selectable }" :row="props.row" :offset="props.offset" :length="props.content.length"
+    :hovered="dropdownShow">
+    <n-dropdown show-arrow trigger="hover" placement="right" v-model:show="dropdownShow" :disabled="!dropdownEnabled"
+      :options="dropdownOptions" :render-label="renderDropdownLabel" :render-icon="renderDropdownIcon">
+      <div :class="[selectable, $style.cell]" :style="style" @click="handleClick">
+        <BSIcon v-for="(icon, index) in (parts?.icons || [])" :key="index" :content="icon" :stacked="stacked"
+          @ratio="(ratio: number) => updateRatio(index, ratio)" />
+      </div>
+    </n-dropdown>
   </BSSelectable>
 </template>
 
 <script lang="ts" setup>
 import {
   type CSSProperties,
+  type VNode,
   computed,
   defineProps,
+  h,
   ref,
 } from 'vue';
 
+import {
+  type DropdownOption,
+  NDropdown,
+} from 'naive-ui';
+
 import { useEditorStore } from '@/stores/editor';
 import styleFromParams from '@/utils/styleFromParams';
 
@@ -63,6 +74,31 @@ function updateRatio(layer: number, newRatio: number): void {
     ratio.value = newRatio;
   }
 }
+
+const dropdownShow = ref(false);
+
+const dropdownEnabled = computed(() => (parts.value?.icons || []).length > 0);
+
+const dropdownOptions = computed(() => (parts.value?.icons || []).map((icon) => ({
+  label: icon,
+  key: icon
+} as DropdownOption)));
+
+function renderDropdownLabel(option: DropdownOption): VNode {
+  return h('code', null, option.label as string);
+}
+
+function renderDropdownIcon(option: DropdownOption): VNode {
+  return h(BSIcon, {
+    content: option.label as string,
+    stacked: stacked.value,
+    style: {
+      width: '20px',
+      height: '20px',
+      border: '1px solid #ddd',
+    } as CSSProperties,
+  });
+}
 </script>
 
 <style lang="scss" module>

diff --git a/src/components/BSMap/BSSelectable.vue b/src/components/BSMap/BSSelectable.vue
@@ -2,6 +2,7 @@
   <slot :selectable="{
     [$style.selectable]: true,
     [$style.focused]: focused,
+    [$style.hovered]: props.hovered,
   }" />
 </template>
 
@@ -14,6 +15,7 @@ const props = defineProps<{
   row: number;
   offset: number;
   length: number;
+  hovered?: boolean;
 }>();
 
 const editorStore = useEditorStore();
@@ -50,7 +52,8 @@ const focused = computed(() => {
     transition: opacity 200ms;
   }
 
-  &:hover::after {
+  &:hover::after,
+  &.hovered::after {
     opacity: 0.2;
   }