@opentiny/tiny-robot 0.2.0-alpha.1 → 0.2.0-alpha.3

package/src/feedback/components/SourceList.vue

@@ -1,112 +0,0 @@
-<script setup lang="ts">
-import { IconArrowUp } from '@opentiny/tiny-robot-svgs'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    sources: { label: string; link: string }[]
-    linesLimit?: number
-  }>(),
-  {
-    linesLimit: Number.MAX_SAFE_INTEGER,
-  },
-)
-
-const showAll = ref(false)
-const pillRefs = ref<(HTMLElement | null)[]>([])
-const morePillIndex = ref<number | null>(null)
-
-const updateMoreIndex = () => {
-  nextTick(() => {
-    const tops = pillRefs.value.map((el) => el?.offsetTop || 0)
-    const uniqueTops = Array.from(new Set(tops))
-
-    if (uniqueTops.length > props.linesLimit) {
-      // 超过 linesLimit 行，找到第 linesLimit 行最后一个的index
-      const lastLineTop = uniqueTops[props.linesLimit - 1]
-      const lastIndex = tops.lastIndexOf(lastLineTop)
-      morePillIndex.value = lastIndex
-    } else {
-      morePillIndex.value = null
-    }
-  })
-}
-
-const leftPillCount = computed(() => {
-  return props.sources.length - (morePillIndex.value || 0)
-})
-
-onMounted(updateMoreIndex)
-
-watch(() => props.sources, updateMoreIndex)
-
-const setPillRef = (el: HTMLElement | null, idx: number) => {
-  if (el) {
-    pillRefs.value[idx] = el
-  }
-}
-</script>
-
-<template>
-  <div class="tr-feedback__source-list">
-    <template v-for="(source, index) in props.sources" :key="index">
-      <a
-        v-if="!morePillIndex || showAll || index < morePillIndex"
-        class="pill"
-        :href="source.link"
-        target="_blank"
-        :ref="(el) => setPillRef(el as HTMLElement, index)"
-      >
-        {{ source.label }}
-      </a>
-      <span v-if="morePillIndex && !showAll && index === morePillIndex" class="pill" @click="showAll = true">
-        {{ leftPillCount }}+
-      </span>
-    </template>
-    <span v-if="showAll" class="pill collapse-pill" @click="showAll = false">
-      <IconArrowUp />
-    </span>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.tr-feedback__source-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-
-  .pill {
-    padding: 4px 12px;
-    font-size: 12px;
-    line-height: 20px;
-    border-radius: 999px;
-    border: none;
-    background-color: rgba(20, 118, 255, 0.06);
-    color: rgb(20, 118, 255);
-    cursor: pointer;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &.collapse {
-      font-size: 16px;
-    }
-  }
-
-  .collapse-pill {
-    padding: 0;
-    font-size: 16px;
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.3s ease;
-
-    &:hover {
-      background-color: rgba(20, 118, 255, 0.12);
-    }
-  }
-}
-</style>

package/src/feedback/components/index.ts

@@ -1 +0,0 @@
-export { default as SourceList } from './SourceList.vue'

package/src/feedback/index.ts

@@ -1,12 +0,0 @@
-import { App } from 'vue'
-import Feedback from './index.vue'
-
-Feedback.name = 'TrFeedback'
-
-const install = function <T>(app: App<T>) {
-  app.component(Feedback.name!, Feedback)
-}
-
-Feedback.install = install
-
-export default Feedback as typeof Feedback & { install: typeof install }

package/src/feedback/index.type.ts

@@ -1,27 +0,0 @@
-import { Component, VNode } from 'vue'
-
-export interface FeedbackProps {
-  operations?: {
-    name: string
-    label: string
-    onClick?: () => void
-  }[]
-  operationsLimit?: number
-  actions?: {
-    name: string
-    label: string
-    icon?: 'copy' | 'refresh' | 'like' | 'dislike' | VNode | Component
-    onClick?: () => void
-  }[]
-  actionsLimit?: number
-  sources?: {
-    label: string
-    link: string
-  }[]
-  sourcesLinesLimit?: number
-}
-
-export interface FeedbackEvents {
-  (e: 'operation', name: string): void
-  (e: 'action', name: string): void
-}

package/src/feedback/index.vue

@@ -1,166 +0,0 @@
-<script lang="ts" setup>
-import { IconArrowDown, IconArrowUp, IconCopy, IconDislike, IconLike, IconRefresh } from '@opentiny/tiny-robot-svgs'
-import TinyButton from '@opentiny/vue-button'
-import { ref } from 'vue'
-import ActionGroup, { ActionGroupItem } from '../action-group'
-import IconButton from '../icon-button'
-import { SourceList } from './components'
-import type { FeedbackEvents, FeedbackProps } from './index.type'
-
-const props = withDefaults(defineProps<FeedbackProps>(), {
-  operationsLimit: Number.MAX_SAFE_INTEGER,
-  actionsLimit: Number.MAX_SAFE_INTEGER,
-  sourcesLinesLimit: Number.MAX_SAFE_INTEGER,
-})
-
-const iconMap = {
-  copy: IconCopy,
-  refresh: IconRefresh,
-  like: IconLike,
-  dislike: IconDislike,
-}
-
-const emit = defineEmits<FeedbackEvents>()
-
-const handleOperation = (name: string) => {
-  props.operations?.find((operation) => operation.name === name)?.onClick?.()
-  emit('operation', name)
-}
-
-const handleAction = (name: string) => {
-  props.actions?.find((action) => action.name === name)?.onClick?.()
-  emit('action', name)
-}
-
-const showSourceList = ref(false)
-
-const handleSourceList = () => {
-  showSourceList.value = !showSourceList.value
-}
-</script>
-
-<template>
-  <div class="tr-feedback">
-    <div class="tr-feedback__operations">
-      <div v-if="props.operations?.length" class="tr-feedback__operations-left">
-        <action-group
-          :max-num="props.operationsLimit"
-          :drop-down-show-label-only="true"
-          @item-click="handleOperation"
-          class="tr-feedback__operations-left-action-group"
-        >
-          <action-group-item
-            v-for="operation in props.operations"
-            :key="operation.name"
-            :name="operation.name"
-            :label="operation.label"
-          >
-            <tiny-button round :reset-time="0" size="mini">
-              {{ operation.label }}
-            </tiny-button>
-          </action-group-item>
-          <template #moreBtn>
-            <tiny-button round size="mini" :reset-time="0" class="tr-feedback__operations-more-btn">
-              <span>更多</span>
-              <icon-arrow-down />
-            </tiny-button>
-          </template>
-        </action-group>
-      </div>
-      <div v-else-if="props.sources?.length">
-        <span class="tr-feedback__source" @click="handleSourceList">
-          <span>{{ props.sources?.length }}条来源</span>
-          <component :is="showSourceList ? IconArrowUp : IconArrowDown" />
-        </span>
-      </div>
-      <div class="tr-feedback__operations-right">
-        <action-group :max-num="props.actionsLimit" @item-click="handleAction">
-          <action-group-item
-            v-for="action in props.actions"
-            :key="action.name"
-            :name="action.name"
-            :label="action.label"
-          >
-            <icon-button
-              v-if="typeof action.icon === 'string'"
-              :icon="iconMap[action.icon]"
-              :tooltip="action.label"
-            ></icon-button>
-            <component v-else :is="action.icon"></component>
-          </action-group-item>
-        </action-group>
-      </div>
-    </div>
-    <div class="tr-feedback__footer">
-      <div v-if="props.operations?.length && props.sources?.length">
-        <span class="tr-feedback__source" @click="handleSourceList">
-          <span>{{ props.sources?.length }}条来源</span>
-          <component :is="showSourceList ? IconArrowUp : IconArrowDown" />
-        </span>
-      </div>
-      <source-list
-        v-if="showSourceList && props.sources"
-        :sources="props.sources"
-        :lines-limit="props.sourcesLinesLimit"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.tr-feedback {
-  .tr-feedback__operations {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 8px;
-
-    .tr-feedback__operations-left {
-      .tr-feedback__operations-left-action-group {
-        gap: 8px;
-      }
-
-      .tr-feedback__operations-more-btn {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-
-        svg {
-          font-size: 12px;
-        }
-      }
-    }
-
-    .tr-feedback__operations-right {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-  }
-  .tr-feedback__footer {
-    margin-top: 8px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .tr-feedback__source {
-    height: 24px;
-    display: inline-flex;
-    align-items: center;
-    font-size: 12px;
-    line-height: 20px;
-    color: rgb(128, 128, 128);
-    cursor: pointer;
-    gap: 2px;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    svg {
-      font-size: 16px;
-    }
-  }
-}
-</style>

package/src/history/components/index.ts

@@ -1,2 +0,0 @@
-export { default as ItemTag } from './item-tag.vue'
-export { default as SearchEmpty } from './search-empty.vue'

package/src/history/components/item-tag.vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import type { HistoryItemTagProps } from '../index.type'
-
-const props = withDefaults(defineProps<HistoryItemTagProps>(), {
-  type: 'default',
-})
-</script>
-
-<template>
-  <div :class="['tr-history__item-tag', props.type]" :style="props.style">
-    <span>{{ props.text }}</span>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.tr-history__item-tag {
-  padding: 0 4px;
-  font-size: 12px;
-  line-height: 18px;
-  border-radius: 2px;
-
-  &.default {
-    color: rgb(25, 25, 25);
-    background-color: rgb(245, 245, 245);
-  }
-
-  &.success {
-    // TODO 成功
-    color: rgb(25, 25, 25);
-    background-color: rgb(245, 245, 245);
-  }
-
-  &.warning {
-    // TODO 警告
-    color: rgb(25, 25, 25);
-    background-color: rgb(245, 245, 245);
-  }
-
-  &.error {
-    color: rgb(242, 48, 48);
-    background-color: rgb(252, 227, 224);
-  }
-
-  &.info {
-    color: rgb(20, 118, 255);
-    background-color: rgb(222, 236, 255);
-  }
-}
-</style>

package/src/history/components/search-empty.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="tr-history__empty">
-    <span class="tr-history__empty-icon">
-      <IconEmptySearch />
-    </span>
-    <span class="tr-history__empty-text">{{ props.text }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { IconEmptySearch } from '@opentiny/tiny-robot-svgs'
-
-const props = withDefaults(defineProps<{ text: string }>(), {
-  text: '暂无内容',
-})
-</script>
-
-<style lang="less" scoped>
-.tr-history__empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 84px;
-  padding-bottom: 0;
-
-  .tr-history__empty-icon {
-    font-size: 16px;
-  }
-
-  .tr-history__empty-text {
-    font-size: 12px;
-    line-height: 24px;
-    color: rgb(25, 25, 25);
-  }
-}
-</style>

package/src/history/composables/index.ts

@@ -1 +0,0 @@
-export * from './useEditItemTitle'

package/src/history/composables/useEditItemTitle.ts

@@ -1,75 +0,0 @@
-import { onClickOutside } from '@vueuse/core'
-import { ComponentPublicInstance, nextTick, ref, watchEffect } from 'vue'
-import { HistoryEvents, HistoryItem } from '../index.type'
-
-export const useEditItemTitle = (emit: HistoryEvents) => {
-  const editingItem = ref<Pick<HistoryItem, 'id' | 'title'> & { rawData: HistoryItem }>()
-
-  const handleEdit = (item: HistoryItem) => {
-    editingItem.value = {
-      id: item.id,
-      title: item.title,
-      rawData: item,
-    }
-  }
-
-  const inputRef = ref<HTMLInputElement | null>(null)
-
-  const handleEditorInputRef = (el: Element | ComponentPublicInstance | null) => {
-    if (!el) {
-      return
-    }
-
-    nextTick(() => {
-      inputRef.value = el as HTMLInputElement
-      inputRef.value.focus()
-    })
-  }
-
-  let stopFn: (() => void) | undefined = undefined
-
-  const handleConfirm = () => {
-    if (editingItem.value) {
-      if (editingItem.value.title !== editingItem.value.rawData.title) {
-        const { title, rawData } = editingItem.value
-        emit('item-title-change', title, rawData)
-      }
-      editingItem.value = undefined
-    }
-
-    stopFn?.()
-    stopFn = undefined
-  }
-
-  const handleCancel = () => {
-    editingItem.value = undefined
-    stopFn?.()
-    stopFn = undefined
-  }
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      handleConfirm()
-    } else if (e.key === 'Escape') {
-      handleCancel()
-    }
-  }
-
-  watchEffect(() => {
-    if (!inputRef.value) {
-      return
-    }
-
-    stopFn?.()
-    stopFn = onClickOutside(inputRef, () => {
-      handleConfirm()
-    })
-  })
-
-  return {
-    editingItem,
-    handleEdit,
-    handleEditorInputRef,
-    handleKeyDown,
-  }
-}

package/src/history/index.ts

@@ -1,12 +0,0 @@
-import { App } from 'vue'
-import History from './index.vue'
-
-const install = function <T>(app: App<T>) {
-  app.component('TrHistory', History)
-}
-
-export default {
-  ...History,
-  install,
-  name: 'TrHistory',
-}

package/src/history/index.type.ts

@@ -1,50 +0,0 @@
-import { CSSProperties } from 'vue'
-
-interface BaseHistoryProps {
-  activeTab?: string
-  searchBar?: boolean
-  searchQuery?: string
-  searchPlaceholder?: string
-  searchFn?: (query: string, item: HistoryItem) => boolean
-  selected?: string
-}
-
-export type SingleTabHistoryProps = {
-  tabTitle: string
-  data: HistoryGroup[]
-} & BaseHistoryProps
-
-export type MultiTabHistoryProps = {
-  tabs: {
-    title: string
-    id: string
-  }[]
-  data: Record<string, HistoryGroup[]>
-} & BaseHistoryProps
-
-export type HistoryProps = SingleTabHistoryProps | MultiTabHistoryProps
-
-export interface HistoryGroup<T = Record<string, unknown>> {
-  date: string
-  items: HistoryItem<T>[]
-}
-
-export interface HistoryItemTagProps {
-  text: string
-  type?: 'success' | 'warning' | 'error' | 'info' | 'default'
-  style?: CSSProperties
-}
-
-export interface HistoryItem<T = Record<string, unknown>> {
-  id: string
-  title: string
-  tag?: HistoryItemTagProps
-  data?: T
-}
-
-export interface HistoryEvents {
-  (e: 'close'): void
-  (e: 'item-click', item: HistoryItem): void
-  (e: 'item-title-change', newTitle: string, rawData: HistoryItem): void
-  (e: 'item-delete', item: HistoryItem): void
-}