Standardized collapsible component

src/module/vue/components/buttons/btn-sendmovetochat.vue

@@ -2,27 +2,32 @@
   <btn-faicon
     class="move-chat"
     icon="comment"
-    :tooltip="$t('IRONSWORN.SendToChat')"
+    :tooltip="$t('IRONSWORN.SendToChat', { move: move.displayName })"
     @click="sendToChat"
     :disabled="disabled"
   >
-    <slot name="default"><!-- {{$t('IRONSWORN.Chat')}} --></slot>
+    <slot name="default"></slot>
   </btn-faicon>
 </template>
 
 <style lang="less"></style>
 
 <script setup lang="ts">
+import { inject } from 'vue'
 import { createSfMoveChatMessage } from '../../../chat/sf-move-chat-message'
 import { Move } from '../../../features/custommoves'
+import { IronswornItem } from '../../../item/item.js'
+import { $ItemKey } from '../../provisions.js'
 import btnFaicon from './btn-faicon.vue'
 
 const props = defineProps<{
   move: Move
   disabled?: boolean
 }>()
 
+const $item = inject($ItemKey)
+
 function sendToChat(e) {
-  createSfMoveChatMessage(props.move.moveItem())
+  createSfMoveChatMessage($item as IronswornItem)
 }
 </script>

src/module/vue/components/collapsible/collapsible.vue

@@ -0,0 +1,175 @@
+<template>
+  <component
+    :id="wrapperId"
+    :is="wrapperIs"
+    :class="`${$style.collapsible} ${state.highlighted ? 'highlighted' : ''}`"
+    :aria-expanded="state.expanded"
+    :tabindex="-1"
+    ref="$wrapper"
+  >
+    <header :class="{ [$style.header]: true, [headerClass]: true }">
+      <slot name="before-toggle"></slot>
+      <component
+        :class="{ [headingClass]: true, [$style.heading]: true }"
+        :is="`h${headingLevel}`"
+      >
+        <component
+          :is="noIcon ? 'button' : BtnFaicon"
+          :id="controlId"
+          type="button"
+          :aria-controls="contentId"
+          :icon="
+            noIcon
+              ? undefined
+              : state.expanded
+              ? toggleIconExpanded
+              : toggleIconCollapsed
+          "
+          @click="toggle"
+          class="text clickable"
+          :class="{ [$style.toggle]: true, [toggleClass]: true }"
+          :data-tooltip="toggleTooltip"
+        >
+          <slot name="toggle-content"></slot>
+        </component>
+      </component>
+      <slot name="after-toggle"></slot>
+    </header>
+    <CollapseTransition>
+      <component
+        v-if="state.expanded"
+        :is="contentWrapperIs"
+        role="region"
+        :aria-labelledby="controlId"
+        :id="contentId"
+        class="collapsible-content"
+        :class="{ [contentWrapperClass]: true, [$style.contentWrapper]: true }"
+      >
+        <slot></slot>
+      </component>
+    </CollapseTransition>
+  </component>
+</template>
+
+<style lang="less" module>
+// TODO: horizontal and vertical versions
+.collapsible {
+}
+
+.contentWrapper {
+  padding: 0.25em 0.5rem 0.5rem;
+}
+
+.heading {
+  display: contents !important;
+}
+
+.toggle {
+  margin: 0;
+  height: inherit;
+  flex-grow: 1;
+  text-transform: uppercase;
+  justify-content: left;
+  font-size: inherit;
+}
+</style>
+
+<script setup lang="ts">
+import { nextTick, reactive } from 'vue'
+import CollapseTransition from '../transition/collapse-transition.vue'
+import BtnFaicon from '../buttons/btn-faicon.vue'
+import { computed, ref } from '@vue/reactivity'
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The ID to be assigned to the wrapper element, from which the IDs of other elements within this component are generated. Required in order to generate the correct ARIA annotations.
+     */
+    baseId: string
+    noIcon?: boolean
+    toggleIconCollapsed?: string
+    toggleIconExpanded?: string
+    contentWrapperIs?: string
+    contentWrapperClass?: any
+    toggleClass?: any
+    wrapperIs?: string
+    disabled?: boolean
+    headerClass?: any
+    headingLevel?: number
+    headingClass?: any
+    toggleTooltip?: string
+    forceExpand?: boolean
+  }>(),
+  {
+    toggleIconCollapsed: 'caret-right',
+    toggleIconExpanded: 'caret-down',
+    wrapperIs: 'article',
+    contentWrapperIs: 'section',
+    disabled: false,
+    headingLevel: 3,
+  }
+)
+
+const $wrapper = ref<HTMLElement>()
+const state = reactive<{
+  forceExpand: boolean
+  expanded: boolean
+  highlighted: boolean
+}>({
+  forceExpand: props.forceExpand ?? false,
+  expanded: false,
+  highlighted: false,
+})
+
+const wrapperId = computed(() => props.baseId)
+const controlId = computed(() => `${props.baseId}_control`)
+const contentId = computed(() => `${props.baseId}_content`)
+
+function toggle() {
+  state.expanded = !state.expanded
+}
+
+function expand() {
+  state.expanded = true
+}
+function collapse() {
+  state.expanded = false
+}
+
+function highlight() {
+  state.highlighted = true
+}
+
+function unhighlight() {
+  state.highlighted = false
+}
+
+/**
+ * Scroll to the collapsible, apply the highlight class, and expand it.
+ * @param ms The duration of the highlight effect, in milliseconds
+ */
+async function scrollToAndExpand(ms: number = 2000) {
+  expand()
+  highlight()
+
+  await nextTick()
+
+  $wrapper.value?.scrollIntoView({
+    behavior: 'smooth',
+    block: 'start',
+  })
+
+  await nextTick()
+
+  setTimeout(unhighlight, ms)
+}
+
+defineExpose({
+  scrollToAndExpand,
+  unhighlight,
+  highlight,
+  toggle,
+  collapse,
+  expand,
+})
+</script>

src/module/vue/components/sf-move-category-rows.vue

@@ -0,0 +1,86 @@
+<template>
+  <article class="nogrow" :class="$style.wrapper">
+    <component
+      :is="`h${headingLevel}`"
+      :class="$style.heading"
+      :data-tooltip="$enrichMarkdown(category.dataforgedCategory?.Description)"
+      data-tooltip-direction="LEFT"
+    >
+      {{ category.displayName }}
+    </component>
+    <ul class="flexcol" :class="$style.list">
+      <li
+        v-for="(move, i) of category.moves"
+        :key="i"
+        class="nogrow"
+        :class="$style['list-item']"
+      >
+        <SfMoverow
+          :move="move"
+          ref="allmoves"
+          :headingLevel="headingLevel + 1"
+        />
+      </li>
+    </ul>
+  </article>
+</template>
+
+<style lang="less" module>
+// TODO: have the custom moves pull their color from their directory
+.wrapper {
+  border-width: 2px;
+  border-style: solid;
+  border-radius: 5px;
+  border-color: v-bind('category.dataforgedCategory?.Display.Color');
+}
+
+.list {
+  display: flex;
+  flex-flow: column nowrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.list-item {
+  border-color: var(--ironsworn-color-border);
+  border-style: outset;
+  border-width: 0;
+
+  &:not(:first-child) {
+    border-top-width: 1px;
+  }
+}
+.heading {
+  margin: 0;
+  border: 0;
+  padding: 3px;
+  background-color: v-bind('category.dataforgedCategory?.Display.Color');
+  color: white;
+}
+</style>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MoveCategory } from '../../features/custommoves.js'
+import SfMoverow from './sf-moverow.vue'
+
+const props = withDefaults(
+  defineProps<{
+    category: MoveCategory
+    headingLevel?: number
+  }>(),
+  { headingLevel: 3 }
+)
+
+let allmoves = ref<InstanceType<typeof SfMoverow>[]>([])
+
+function collapseChildren() {
+  for (const row of allmoves.value ?? []) {
+    row.collapsible?.collapse()
+  }
+}
+
+defineExpose({
+  collapseChildren,
+})
+</script>