@ohos-ports/histoire-app 1.0.0-beta.0

package/src/app/components/base/BaseOverflowMenu.vue

@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+import { useResizeObserver } from '@vueuse/core'
+import { computed, h, onBeforeUnmount, reactive, ref } from 'vue'
+
+// Container
+
+const overflowButtonWidth = 32
+
+const el = ref<HTMLDivElement>()
+
+const availableWidth = ref(0)
+
+useResizeObserver(el, (entries) => {
+  const containerWidth = entries[0].contentRect.width
+  availableWidth.value = containerWidth - overflowButtonWidth
+})
+
+// Children
+
+interface ChildState {
+  width: number
+  index: number
+}
+
+const children = ref(new Map<HTMLElement, ChildState>())
+
+const visibleChildrenCount = computed(() => {
+  let width = 0
+  const c = [...children.value.values()].sort((a, b) => a.index - b.index)
+  for (let i = 0; i < c.length; i++) {
+    width += c[i].width
+    if (width > availableWidth.value) {
+      return i
+    }
+  }
+  return c.length
+})
+
+/**
+ * Watches for the size of each child and automatically hide them
+ */
+const ChildWrapper = {
+  name: 'ChildWrapper',
+  props: ['index'],
+  setup(props, { slots }) {
+    const el = ref<HTMLDivElement>()
+
+    const state = reactive({ width: 0, index: props.index })
+
+    useResizeObserver(el, (entries) => {
+      const width = entries[0].contentRect.width
+      if (!children.value.has(el.value)) {
+        children.value.set(el.value, state)
+      }
+      state.width = width
+    })
+
+    onBeforeUnmount(() => {
+      children.value.delete(el.value)
+    })
+
+    const visible = computed(() => visibleChildrenCount.value > state.index)
+
+    return () => h('div', { ref: el, style: { visibility: visible.value ? 'visible' : 'hidden' } }, slots.default())
+  },
+}
+
+/**
+ * Wraps each child with a <ChildWrapper>
+ */
+function ChildrenRender(props, { slots }) {
+  const [fragment] = slots.default()
+  return fragment.children.map((vnode, index) => h(ChildWrapper, { index }, () => [vnode]))
+}
+
+/**
+ * Only renders a part of a children list
+ */
+function ChildrenSlice(props, { slots }) {
+  const [fragment] = slots.default()
+  return fragment.children.slice(props.start, props.end)
+}
+</script>
+
+<template>
+  <div
+    ref="el"
+    class="histoire-base-overflow-menu htw-flex htw-overflow-hidden htw-relative"
+  >
+    <ChildrenRender>
+      <slot />
+    </ChildrenRender>
+
+    <VDropdown
+      v-if="visibleChildrenCount < children.size"
+    >
+      <div
+        role="button"
+        class="htw-cursor-pointer hover:htw-bg-primary-50 dark:hover:htw-bg-primary-900 htw-w-8 htw-h-full htw-flex htw-items-center htw-justify-center htw-absolute htw-top-0 htw-right-0"
+      >
+        <Icon
+          icon="carbon:caret-down"
+          class="htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
+        />
+      </div>
+
+      <template #popper>
+        <div class="htw-flex htw-flex-col htw-items-stretch">
+          <ChildrenSlice
+            :start="visibleChildrenCount"
+          >
+            <slot name="overflow" />
+          </ChildrenSlice>
+        </div>
+      </template>
+    </VDropdown>
+  </div>
+</template>

package/src/app/components/base/BaseOverflowTab.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  inheritAttrs: false,
+
+  props: {
+    exact: {
+      type: Boolean,
+      default: false,
+    },
+
+    matched: {
+      type: Boolean,
+      default: null,
+    },
+  },
+})
+</script>
+
+<template>
+  <router-link
+    v-slot="{ isActive, isExactActive, href, navigate }"
+    class="histoire-base-overflow-tab"
+    v-bind="$attrs"
+    custom
+  >
+    <a
+      v-bind="$attrs"
+      :href="href"
+      class="htw-px-4 htw-h-10 htw-min-w-[150px] htw-inline-flex htw-items-center hover:htw-bg-primary-50 dark:hover:htw-bg-primary-900 htw-relative htw-text-gray-900 dark:htw-text-gray-100"
+      :class="{
+        'htw-text-primary-500 dark:htw-text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
+      }"
+      @click="navigate"
+    >
+      <slot />
+
+      <transition name="__histoire-scale-y">
+        <div
+          v-if="matched != null ? matched : (exact && isExactActive) || (!exact && isActive)"
+          class="htw-absolute htw-top-0 htw-left-0 htw-h-full htw-w-[2px] htw-bg-primary-500 dark:htw-bg-primary-400"
+        />
+      </transition>
+    </a>
+  </router-link>
+</template>

package/src/app/components/base/BaseSelect.vue

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import type { ComputedRef } from 'vue'
+import { Icon } from '@iconify/vue'
+import { Dropdown as VDropdown } from 'floating-vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue: string
+  options: Record<string, string> | Array<string>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'select', value: string): void
+}>()
+
+const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
+  if (Array.isArray(props.options)) {
+    return Object.fromEntries(props.options.map(value => [value, value]))
+  }
+  return props.options
+})
+
+const selectedLabel = computed(() => formattedOptions.value[props.modelValue])
+
+function selectValue(value: string, hide: () => void) {
+  emit('update:modelValue', value)
+  emit('select', value)
+  hide()
+}
+</script>
+
+<template>
+  <VDropdown
+    class="histoire-base-select"
+    auto-size
+    auto-boundary-max-size
+  >
+    <div
+      class="htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw-h-[27px] -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 hover:htw-border-primary-500 dark:hover:htw-border-primary-500 htw-rounded-sm htw-flex htw-gap-2 htw-items-center htw-leading-normal"
+    >
+      <div class="htw-flex-1 htw-truncate">
+        <slot :label="selectedLabel">
+          {{ selectedLabel }}
+        </slot>
+      </div>
+      <Icon
+        icon="carbon:chevron-sort"
+        class="htw-w-4 htw-h-4 htw-flex-none htw-ml-auto"
+      />
+    </div>
+    <template #popper="{ hide }">
+      <div class="htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700">
+        <div
+          v-for="(label, value) in formattedOptions"
+          v-bind="{ ...$attrs, class: null, style: null }"
+          :key="label"
+          class="htw-px-2 htw-py-1 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
+          :class="{
+            'htw-bg-primary-200 dark:htw-bg-primary-800': props.modelValue === value,
+          }"
+          @click="selectValue(value, hide)"
+        >
+          <slot
+            name="option"
+            :label="label"
+            :value="value"
+          >
+            {{ label }}
+          </slot>
+        </div>
+      </div>
+    </template>
+  </VDropdown>
+</template>

package/src/app/components/base/BaseSplitPane.vue

@@ -0,0 +1,244 @@
+<script lang="ts" setup>
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+const SAVE_PREFIX = '__histoire'
+
+const props = defineProps({
+  orientation: {
+    type: String,
+    default: 'landscape',
+    validator: (value: string) => ['landscape', 'portrait'].includes(value),
+  },
+
+  defaultSplit: {
+    type: Number,
+    default: 50,
+  },
+
+  split: {
+    type: Number,
+    default: undefined,
+  },
+
+  min: {
+    type: Number,
+    default: 20,
+  },
+
+  max: {
+    type: Number,
+    default: 80,
+  },
+
+  draggerOffset: {
+    type: String,
+    default: 'center',
+    validator: (value: string) => ['before', 'center', 'after'].includes(value),
+  },
+
+  saveId: {
+    type: String,
+    default: null,
+  },
+
+  fixed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits({
+  'update:split': (_value: number) => true,
+})
+
+const currentSplit = ref(props.defaultSplit)
+
+watch(() => props.split, (value) => {
+  if (value !== undefined) {
+    currentSplit.value = value
+  }
+}, {
+  immediate: true,
+})
+
+if (props.saveId) {
+  const storageKey = `${SAVE_PREFIX}-split-pane-${props.saveId}`
+
+  const savedValue = localStorage.getItem(storageKey)
+  if (savedValue != null) {
+    let parsedValue
+    try {
+      parsedValue = JSON.parse(savedValue)
+    }
+    catch (e) {
+      console.error(e)
+    }
+
+    if (typeof parsedValue === 'number') {
+      currentSplit.value = parsedValue
+    }
+  }
+
+  watch(currentSplit, (value) => {
+    localStorage.setItem(storageKey, JSON.stringify(value))
+  })
+
+  watch(currentSplit, (value) => {
+    if (value !== props.split) {
+      emit('update:split', value)
+    }
+  }, {
+    immediate: true,
+  })
+}
+
+const boundSplit = computed(() => {
+  if (currentSplit.value < props.min) {
+    return props.min
+  }
+  else if (currentSplit.value > props.max) {
+    return props.max
+  }
+  else {
+    return currentSplit.value
+  }
+})
+
+const leftStyle = computed(() => ({
+  [props.orientation === 'landscape' ? 'width' : 'height']: props.fixed ? `${boundSplit.value}px` : `${boundSplit.value}%`,
+}))
+
+const rightStyle = computed(() => ({
+  [props.orientation === 'landscape' ? 'width' : 'height']: props.fixed ? null : `${100 - boundSplit.value}%`,
+}))
+
+const dragging = ref(false)
+let startPosition = 0
+let startSplit = 0
+const el = ref(null)
+
+function dragStart(e) {
+  dragging.value = true
+  startPosition = props.orientation === 'landscape' ? e.pageX : e.pageY
+  startSplit = boundSplit.value
+  window.addEventListener('mousemove', dragMove)
+  window.addEventListener('mouseup', dragEnd)
+}
+
+function dragMove(e) {
+  if (dragging.value) {
+    let position
+    let totalSize
+    if (props.orientation === 'landscape') {
+      position = e.pageX
+      totalSize = el.value.offsetWidth
+    }
+    else {
+      position = e.pageY
+      totalSize = el.value.offsetHeight
+    }
+    const dPosition = position - startPosition
+    if (props.fixed) {
+      currentSplit.value = startSplit + dPosition
+    }
+    else {
+      currentSplit.value = startSplit + ~~(dPosition / totalSize * 200) / 2
+    }
+  }
+}
+
+function dragEnd() {
+  dragging.value = false
+  removeDragListeners()
+}
+
+function removeDragListeners() {
+  window.removeEventListener('mousemove', dragMove)
+  window.removeEventListener('mouseup', dragEnd)
+}
+
+onUnmounted(() => {
+  removeDragListeners()
+})
+</script>
+
+<template>
+  <div
+    ref="el"
+    class="histoire-base-split-pane htw-flex htw-h-full htw-isolate htw-overflow-auto"
+    :class="{
+      'htw-flex-col': orientation === 'portrait',
+      'htw-cursor-ew-resize': dragging && orientation === 'landscape',
+      'htw-cursor-ns-resize': dragging && orientation === 'portrait',
+      [orientation]: true,
+    }"
+  >
+    <div
+      class="htw-relative htw-top-0 htw-left-0 htw-z-20"
+      :class="{
+        'htw-pointer-events-none': dragging,
+        'htw-border-r htw-border-gray-300/30 dark:htw-border-gray-800': orientation === 'landscape',
+        'htw-flex-none': fixed,
+      }"
+      :style="leftStyle"
+    >
+      <slot name="first" />
+
+      <div
+        class="dragger htw-absolute htw-z-100 hover:htw-bg-primary-500/50 htw-transition-colors htw-duration-150 htw-delay-150"
+        :class="{
+          'htw-top-0 htw-bottom-0 htw-cursor-ew-resize': orientation === 'landscape',
+          'htw-left-0 htw-right-0 htw-cursor-ns-resize': orientation === 'portrait',
+          [`dragger-offset-${draggerOffset}`]: true,
+          'htw-bg-primary-500/25': dragging,
+        }"
+        @mousedown.prevent="dragStart"
+      />
+    </div>
+    <div
+      class="htw-relative htw-bottom-0 htw-right-0"
+      :class="{
+        'htw-pointer-events-none': dragging,
+        'htw-border-t htw-border-gray-300/30 dark:htw-border-gray-800': orientation === 'portrait',
+        'htw-flex-1': fixed,
+      }"
+      :style="rightStyle"
+    >
+      <slot name="last" />
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.landscape > div > .dragger {
+  width: .625rem;
+}
+
+.portrait > div > .dragger {
+  height: .625rem;
+}
+
+.landscape > div > .dragger.dragger-offset-before {
+  right: 0;
+}
+
+.portrait > div > .dragger.dragger-offset-before {
+  bottom: 0;
+}
+
+.landscape > div > .dragger.dragger-offset-center {
+  right: -.3125rem;
+}
+
+.portrait > div > .dragger.dragger-offset-center {
+  bottom: -.3125rem;
+}
+
+.landscape > div > .dragger.dragger-offset-after {
+  right: -.625rem;
+}
+
+.portrait > div > .dragger.dragger-offset-after {
+  bottom: -.625rem;
+}
+</style>

package/src/app/components/base/BaseTab.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  inheritAttrs: false,
+
+  props: {
+    exact: {
+      type: Boolean,
+      default: false,
+    },
+
+    matched: {
+      type: Boolean,
+      default: null,
+    },
+  },
+})
+</script>
+
+<template>
+  <router-link
+    v-slot="{ isActive, isExactActive, href, navigate }"
+    class="histoire-base-tab"
+    v-bind="$attrs"
+    custom
+  >
+    <a
+      v-bind="$attrs"
+      :href="href"
+      class="htw-px-4 htw-h-full htw-inline-flex htw-items-center hover:htw-bg-primary-50 dark:hover:htw-bg-primary-900 htw-relative htw-text-gray-900 dark:htw-text-gray-100"
+      :class="{
+        'htw-text-primary-500 dark:htw-text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
+      }"
+      @click="navigate"
+    >
+      <slot />
+
+      <transition name="__histoire-scale-x">
+        <div
+          v-if="matched != null ? matched : (exact && isExactActive) || (!exact && isActive)"
+          class="htw-absolute htw-bottom-0 htw-left-0 htw-w-full htw-h-[2px] htw-bg-primary-500 dark:htw-bg-primary-400"
+        />
+      </transition>
+    </a>
+  </router-link>
+</template>

package/src/app/components/base/BaseTag.vue

@@ -0,0 +1,5 @@
+<template>
+  <span class="histoire-base-tag htw-text-center htw-text-xs htw-mx-1 htw-px-0.5 htw-h-4 htw-uppercase htw-min-w-4 htw-rounded-full htw-bg-primary-500 htw-text-white dark:htw-text-black">
+    <slot />
+  </span>
+</template>

package/src/app/components/command/CommandPrompts.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { ClientCommand } from '@histoire/shared'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import { executeCommand, getCommandContext } from '../../util/commands.js'
+import BaseButton from '../base/BaseButton.vue'
+import BaseKeyboardShortcut from '../base/BaseKeyboardShortcut.vue'
+import PromptSelect from './PromptSelect.vue'
+import PromptText from './PromptText.vue'
+
+const props = defineProps<{
+  command: ClientCommand
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const promptTypes = {
+  text: PromptText,
+  select: PromptSelect,
+}
+
+const answers = reactive<Record<string, any>>({})
+
+// Initial default values
+for (const prompt of props.command.prompts) {
+  let defaultValue
+  if (typeof prompt.defaultValue === 'function') {
+    defaultValue = prompt.defaultValue(answers)
+  }
+  else {
+    defaultValue = prompt.defaultValue
+  }
+  answers[prompt.field] = defaultValue
+}
+
+function submit() {
+  const params = props.command.getParams
+    ? props.command.getParams({ ...getCommandContext(), answers })
+    : answers
+  executeCommand(props.command, params)
+  emit('close')
+}
+
+// Autofocus
+
+const promptComps = ref<any[]>([])
+
+function focusPrompt(index: number) {
+  nextTick(() => {
+    promptComps.value[index]?.focus?.()
+  })
+}
+
+onMounted(() => {
+  focusPrompt(0)
+})
+</script>
+
+<template>
+  <form
+    class="histoire-command-prompts htw-flex htw-flex-col"
+    @submit.prevent="submit()"
+    @keyup.escape="$emit('close')"
+  >
+    <div class="htw-p-4 htw-opacity-70">
+      {{ command.label }}
+    </div>
+
+    <component
+      :is="promptTypes[prompt.type]"
+      v-for="(prompt, index) of command.prompts"
+      :key="prompt.field"
+      ref="promptComps"
+      v-model="answers[prompt.field]"
+      :prompt="prompt"
+      :answers="answers"
+      :index="index"
+      class="hover:htw-bg-gray-500/10 focus-within:htw-bg-gray-500/5"
+      @next="focusPrompt(index + 1)"
+    />
+
+    <div class="htw-flex htw-justify-end htw-gap-2 htw-p-2">
+      <BaseButton
+        type="submit"
+        class="htw-px-4 htw-py-2 htw-flex htw-items-start htw-gap-2"
+      >
+        <BaseKeyboardShortcut
+          shortcut="Enter"
+        />
+        <span>Submit</span>
+      </BaseButton>
+    </div>
+  </form>
+</template>

package/src/app/components/command/CommandPromptsModal.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue'
+import { useCommandStore } from '../../stores/command.js'
+
+const CommandPrompts = defineAsyncComponent(() => import('./CommandPrompts.vue'))
+
+defineProps({
+  shown: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits({
+  close: () => true,
+})
+
+function close() {
+  emit('close')
+}
+
+const commandStore = useCommandStore()
+</script>
+
+<template>
+  <div
+    v-if="shown"
+    class="histoire-command-prompts-modal htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-900/80 htw-z-20"
+  >
+    <div
+      class="htw-absolute htw-inset-0"
+      @click="close()"
+    />
+    <div class="htw-bg-white dark:htw-bg-gray-900 md:htw-mt-16 md:htw-mx-auto htw-w-screen htw-max-w-[512px] htw-max-h-[80vh] htw-overflow-y-auto htw-scroll-smooth htw-shadow-xl htw-border htw-border-gray-200 dark:htw-border-gray-750 htw-rounded-lg htw-relative htw-divide-y htw-divide-gray-200 dark:htw-divide-gray-850">
+      <CommandPrompts
+        :command="commandStore.selectedCommand"
+        @close="close()"
+      />
+    </div>
+  </div>
+</template>