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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-robot",
-  "version": "0.1.0",
+  "version": "0.2.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -16,14 +16,14 @@
     "vue": "^3.3.11"
   },
   "dependencies": {
-    "@opentiny/tiny-robot-svgs": "0.1.0",
+    "@opentiny/tiny-robot-svgs": "0.2.0-alpha.1",
     "@opentiny/vue": "^3.21.0",
     "@opentiny/vue-button": "^3.21.0",
     "@opentiny/vue-icon": "^3.22.0",
     "@opentiny/vue-input": "^3.21.0",
     "@opentiny/vue-tooltip": "^3.22.0",
-    "markdown-it": "^14.1.0",
-    "vue": "^3.3.11"
+    "@vueuse/core": "^13.1.0",
+    "markdown-it": "^14.1.0"
   },
   "devDependencies": {
     "@opentiny/vue-vite-import": "^1.3.0",
@@ -40,5 +40,5 @@
     "vue": "^3.3.11",
     "vue-tsc": "^2.2.8"
   },
-  "gitHead": "ff5f5ae32d52a6298401cbd9c7f70f0b0c5253e3"
+  "gitHead": "3000951723ed8b1caa1361ebac131229bec9c237"
 }

package/src/action-group/ActionGroup.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { IconMenu } from '@opentiny/tiny-robot-svgs'
+import { onClickOutside, useWindowSize } from '@vueuse/core'
+import { computed, nextTick, ref, useTemplateRef, VNode, watch } from 'vue'
+import IconButton from '../icon-button'
+import { ActionGroupEvents, ActionGroupProps, ActionGroupSlots } from './index.type'
+
+const props = defineProps<ActionGroupProps>()
+
+const slots = defineSlots<ActionGroupSlots>()
+
+const emit = defineEmits<ActionGroupEvents>()
+
+const children = computed(() => {
+  const defaultSlot = slots.default()
+
+  if (Array.isArray(defaultSlot)) {
+    if (defaultSlot.length === 1 && defaultSlot[0].type?.toString() === 'Symbol(v-fgt)') {
+      return defaultSlot[0].children as VNode[]
+    }
+
+    return defaultSlot
+  }
+
+  if (defaultSlot.type?.toString() === 'Symbol(v-fgt)') {
+    return defaultSlot.children as VNode[]
+  }
+
+  return [defaultSlot]
+})
+
+const maxNum = computed(() => {
+  const n = props.maxNum ?? Number.MAX_SAFE_INTEGER
+
+  return n > 0 ? n : Number.MAX_SAFE_INTEGER
+})
+
+const showMore = computed(() => {
+  return children.value.length > maxNum.value
+})
+
+const list = computed(() => {
+  if (showMore.value) {
+    return children.value.slice(0, maxNum.value)
+  }
+
+  return children.value
+})
+
+const moreList = computed(() => {
+  if (showMore.value) {
+    return children.value.slice(maxNum.value)
+  }
+
+  return []
+})
+
+const moreBtn = useTemplateRef('moreBtnRef')
+const dropDown = useTemplateRef('dropDownRef')
+const showDropdown = ref(false)
+
+const handleMoreClick = () => {
+  showDropdown.value = !showDropdown.value
+}
+
+onClickOutside(dropDown, (ev) => {
+  if (moreBtn.value?.contains(ev.target as Node)) {
+    return
+  }
+
+  showDropdown.value = false
+})
+
+const handleItemClick = (name: string) => {
+  emit('item-click', name)
+  showDropdown.value = false
+}
+
+const dropDownPlacement = ref('placement-bottom')
+const { height: windowHeight } = useWindowSize()
+
+const updateDropDownPlacement = () => {
+  if (!dropDown.value || !moreBtn.value) {
+    return 'placement-bottom'
+  }
+
+  const dropDownRect = dropDown.value.getBoundingClientRect()
+  const moreBtnRect = moreBtn.value.getBoundingClientRect()
+
+  dropDownPlacement.value =
+    moreBtnRect.bottom + dropDownRect.height + 16 > windowHeight.value ? 'placement-top' : 'placement-bottom'
+}
+
+watch(showDropdown, (show) => {
+  if (show) {
+    nextTick(() => {
+      updateDropDownPlacement()
+    })
+  }
+})
+
+watch(windowHeight, () => {
+  if (showDropdown.value) {
+    updateDropDownPlacement()
+  }
+})
+</script>
+
+<template>
+  <div class="tr-action-group">
+    <span
+      v-for="(item, index) in list"
+      :key="index"
+      class="tr-action-group__btn-wrapper"
+      @click="handleItemClick(item.props?.name)"
+    >
+      <component :is="item" />
+    </span>
+    <span v-if="showMore" ref="moreBtnRef" class="tr-action-group__btn-wrapper" @click="handleMoreClick">
+      <slot name="moreBtn">
+        <icon-button :icon="IconMenu" tooltip="更多" />
+      </slot>
+      <transition name="tr-action-group-dropdown">
+        <ul v-show="showDropdown" ref="dropDownRef" :class="['tr-action-group__dropdown', dropDownPlacement]">
+          <li
+            class="tr-action-group__dropdown-item"
+            v-for="(item, index) in moreList"
+            :key="index"
+            @click.stop="handleItemClick(item.props?.name)"
+          >
+            <component v-if="!props.dropDownShowLabelOnly" :is="item" />
+            <span class="tr-action-group__dropdown-item-text">{{ item.props?.label }}</span>
+          </li>
+        </ul>
+      </transition>
+    </span>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-action-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+
+  .tr-action-group__btn-wrapper {
+    display: inline-flex;
+    line-height: 0;
+    position: relative;
+  }
+
+  .tr-action-group__dropdown {
+    width: max-content;
+    position: absolute;
+    z-index: 100;
+    right: 0;
+    background-color: white;
+    padding: 4px;
+    border-radius: 12px;
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
+
+    &.placement-top {
+      bottom: calc(100% + 8px);
+    }
+
+    &.placement-bottom {
+      top: calc(100% + 8px);
+    }
+
+    .tr-action-group__dropdown-item {
+      border-radius: 8px;
+      cursor: pointer;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 4px 16px 4px 8px;
+      gap: 4px;
+      transition: background-color 0.3s;
+
+      &:not(:first-child) {
+        margin-top: 4px;
+      }
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.04);
+      }
+
+      &:active {
+        background-color: rgba(0, 0, 0, 0.15);
+      }
+
+      & > * {
+        flex-shrink: 0;
+      }
+
+      &:has(> *:only-child) {
+        padding: 4px 16px;
+      }
+
+      .tr-action-group__dropdown-item-text {
+        font-size: 12px;
+        line-height: 20px;
+        color: rgb(25, 25, 25);
+      }
+
+      :deep(button) {
+        --tr-icon-button-hover-bg: unset;
+        --tr-icon-button-active-bg: unset;
+      }
+    }
+  }
+
+  // 下拉动画
+  .tr-action-group-dropdown {
+    &-enter-active,
+    &-leave-active {
+      transition: opacity 0.3s ease;
+    }
+
+    &-enter-from,
+    &-leave-to {
+      opacity: 0;
+    }
+
+    &-enter-to,
+    &-leave-from {
+      opacity: 1;
+    }
+  }
+}
+</style>

package/src/action-group/ActionGroupItem.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ActionGroupItemProps } from './index.type'
+
+defineProps<ActionGroupItemProps>()
+</script>
+
+<template>
+  <slot></slot>
+</template>

package/src/action-group/index.ts

@@ -0,0 +1,25 @@
+import { App } from 'vue'
+import ActionGroup from './ActionGroup.vue'
+import ActionGroupItemComp from './ActionGroupItem.vue'
+
+ActionGroup.name = 'TrActionGroup'
+
+const install = function <T>(app: App<T>) {
+  app.component(ActionGroup.name!, ActionGroup)
+}
+
+ActionGroup.install = install
+
+export default ActionGroup as typeof ActionGroup & { install: typeof install }
+
+ActionGroupItemComp.name = 'TrActionGroupItem'
+
+const installActionGroupItem = function <T>(app: App<T>) {
+  app.component(ActionGroupItemComp.name!, ActionGroupItemComp)
+}
+
+ActionGroupItemComp.install = installActionGroupItem
+
+export const ActionGroupItem = ActionGroupItemComp as typeof ActionGroupItemComp & {
+  install: typeof installActionGroupItem
+}

package/src/action-group/index.type.ts

@@ -0,0 +1,20 @@
+import { VNode } from 'vue'
+
+export interface ActionGroupProps {
+  maxNum?: number
+  dropDownShowLabelOnly?: boolean
+}
+
+export interface ActionGroupEvents {
+  (e: 'item-click', name: string): void
+}
+
+export interface ActionGroupSlots {
+  default: () => VNode | VNode[]
+  moreBtn: () => VNode
+}
+
+export interface ActionGroupItemProps {
+  name: string
+  label: string
+}

package/src/bubble/bubble-list.vue

@@ -21,9 +21,7 @@ watch([() => props.items.length, () => lastBubble.value?.content], () => {
 
 const getItemProps = (item: BubbleProps): BubbleProps => {
   const defaultConfig = item.role ? props.roles?.[item.role] || {} : {}
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { id, ...rest } = item
-  return { ...defaultConfig, ...rest }
+  return { ...defaultConfig, ...item }
 }
 </script>
 

package/src/bubble/bubble.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import markdownit from 'markdown-it'
-import { computed, defineComponent, useSlots } from 'vue'
-import { BubbleActionOptions, BubbleEvents, BubbleProps, BubbleSlots } from './index.type'
+import { computed, useSlots } from 'vue'
 import { CopyAction, RefreshAction } from './components/actions'
+import { BubbleActionOptions, BubbleEvents, BubbleProps, BubbleSlots } from './index.type'
 
 const props = withDefaults(defineProps<BubbleProps>(), {
   content: '',
@@ -26,16 +26,6 @@ const bubbleContent = computed(() => {
 
 const placementStart = computed(() => props.placement === 'start')
 
-const AvatarComp = computed(() => {
-  if (!props.avatar) {
-    return null
-  }
-
-  return defineComponent(() => {
-    return () => props.avatar
-  })
-})
-
 const defaultActionsMap = new Map<string, BubbleActionOptions>([
   [
     'copy',
@@ -99,8 +89,8 @@ const handleActionClick = (name: string, ...args: unknown[]) => {
       },
     ]"
   >
-    <div v-if="AvatarComp" class="tr-bubble__avatar">
-      <component :is="AvatarComp"></component>
+    <div v-if="props.avatar" class="tr-bubble__avatar">
+      <component :is="props.avatar"></component>
     </div>
     <div class="tr-bubble__content-wrapper">
       <slot v-if="props.loading" name="loading">

package/src/bubble/index.type.ts

@@ -16,7 +16,7 @@ export interface BubbleProps {
    * 气泡内容
    */
   content?: string
-  id?: string
+  id?: string | number | symbol
   /**
    * 气泡位置
    */

package/src/container/index.ts

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

package/src/container/index.type.ts

@@ -0,0 +1,17 @@
+export interface ContainerProps {
+  /**
+   * model:show
+   */
+  show: boolean
+  /**
+   * model:fullscreen
+   */
+  fullscreen?: boolean
+}
+
+export interface ContainerSlots {
+  default: () => unknown
+  title: () => unknown
+  operations: () => unknown
+  footer: () => unknown
+}

package/src/container/index.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { IconCancelFullScreen, IconClose, IconFullScreen } from '@opentiny/tiny-robot-svgs'
+import { computed } from 'vue'
+import { ContainerProps, ContainerSlots } from './index.type'
+
+const show = defineModel<ContainerProps['show']>('show', { required: true })
+const fullscreen = defineModel<ContainerProps['fullscreen']>('fullscreen')
+
+defineSlots<ContainerSlots>()
+
+const IconFullScreenSwitcher = computed(() => (fullscreen.value ? IconCancelFullScreen : IconFullScreen))
+</script>
+
+<template>
+  <div class="tr-container">
+    <div class="tr-container__dragging-bar-wrapper">
+      <div class="tr-container__dragging-bar"></div>
+    </div>
+    <div class="tr-container__header">
+      <slot name="title">
+        <h3 class="tr-container__title">OpenTiny NEXT</h3>
+      </slot>
+      <div class="tr-container__header-operations">
+        <slot name="operations"></slot>
+        <button class="icon-btn" @click="$emit('update:fullscreen', !fullscreen)">
+          <IconFullScreenSwitcher />
+        </button>
+        <button class="icon-btn" @click="$emit('update:show', false)">
+          <IconClose />
+        </button>
+      </div>
+    </div>
+    <div class="tr-container__body">
+      <slot></slot>
+    </div>
+    <div class="tr-container__footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-container {
+  --tr-container-width: 480px;
+
+  background-color: rgb(248, 248, 248);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: v-bind('fullscreen? "0" : "unset"');
+  width: v-bind('fullscreen? "unset" : "var(--tr-container-width)"');
+  z-index: v-bind('show? "100":"-1"');
+  opacity: v-bind('show? "1":"0"');
+  display: flex;
+  flex-direction: column;
+
+  .tr-container__dragging-bar-wrapper {
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px;
+
+    // TODO 拖拽条的逻辑
+    .tr-container__dragging-bar {
+      width: 40px;
+      height: 4px;
+      background-color: rgb(217, 217, 217);
+      border-radius: 999px;
+      cursor: grab;
+    }
+  }
+
+  .tr-container__header {
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 24px;
+  }
+
+  .tr-container__title {
+    margin: 0;
+    padding: 0;
+    color: rgb(25, 25, 25);
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .tr-container__header-operations {
+    display: flex;
+    gap: 8px;
+
+    button.icon-btn {
+      width: 28px;
+      height: 28px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      padding: 0;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.04);
+      }
+
+      &:active {
+        background-color: rgba(0, 0, 0, 0.15);
+      }
+
+      svg {
+        font-size: 20px;
+      }
+    }
+  }
+
+  .tr-container__body {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .tr-container__footer {
+    flex-shrink: 0;
+  }
+}
+</style>

package/src/feedback/components/SourceList.vue

@@ -0,0 +1,112 @@
+<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

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

package/src/feedback/index.ts

@@ -0,0 +1,12 @@
+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 }