vue-chat-kit 0.3.9 → 0.3.11

package/src/components/ui/Input.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="vc-input" :class="{ 'vc-input--focus': isFocused }">
+    <span v-if="$slots.prefix" class="vc-input__prefix">
+      <slot name="prefix"></slot>
+    </span>
+    <input
+      v-if="type !== 'textarea'"
+      ref="inputRef"
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :maxlength="maxlength"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @keyup="handleKeyup"
+      class="vc-input__inner"
+    />
+    <textarea
+      v-else
+      ref="textareaRef"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :maxlength="maxlength"
+      :rows="rows"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      class="vc-input__inner"
+    ></textarea>
+    <span v-if="$slots.suffix" class="vc-input__suffix">
+      <slot name="suffix"></slot>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'text',
+    validator: (val) => ['text', 'password', 'email', 'number', 'textarea'].includes(val)
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  maxlength: {
+    type: Number,
+    default: null
+  },
+  rows: {
+    type: Number,
+    default: 3
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'input', 'focus', 'blur', 'keyup'])
+
+const inputRef = ref(null)
+const textareaRef = ref(null)
+const isFocused = ref(false)
+
+const handleInput = (e) => {
+  const value = e.target.value
+  emit('update:modelValue', value)
+  emit('input', value)
+}
+
+const handleFocus = (e) => {
+  isFocused.value = true
+  emit('focus', e)
+}
+
+const handleBlur = (e) => {
+  isFocused.value = false
+  emit('blur', e)
+}
+
+const handleKeyup = (e) => {
+  emit('keyup', e)
+}
+
+const focus = () => {
+  if (inputRef.value) {
+    inputRef.value.focus()
+  }
+  if (textareaRef.value) {
+    textareaRef.value.focus()
+  }
+}
+
+defineExpose({ focus })
+</script>
+
+<style scoped lang="scss">
+.vc-input {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background-color: var(--vck-bg);
+  border: 1px solid var(--vck-border);
+  border-radius: var(--vck-radius);
+  padding: var(--vck-space-sm) var(--vck-space);
+  transition: all var(--vck-transition-fast);
+
+  &--focus {
+    border-color: var(--vck-primary);
+  }
+
+  &:hover:not(.vc-input--disabled) {
+    border-color: var(--vck-border-strong);
+  }
+
+  &__inner {
+    flex: 1;
+    width: 100%;
+    border: none;
+    background: transparent;
+    color: var(--vck-text-primary);
+    font-size: 14px;
+    line-height: 1.5;
+    outline: none;
+    resize: none;
+    font-family: inherit;
+
+    &::placeholder {
+      color: var(--vck-text-placeholder);
+    }
+
+    &:disabled {
+      color: var(--vck-text-muted);
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+  }
+
+  &__prefix,
+  &__suffix {
+    display: inline-flex;
+    align-items: center;
+    color: var(--vck-text-muted);
+    font-size: 14px;
+
+    &:not(:empty) + .vc-input__inner {
+      margin-left: var(--vck-space-xs);
+    }
+
+    .vc-input__inner:not(:empty) + & {
+      margin-left: var(--vck-space-xs);
+    }
+  }
+}
+</style>

package/src/components/ui/Message.vue

@@ -0,0 +1,186 @@
+<template>
+  <Transition name="vc-message-fade">
+    <div
+      v-if="visible"
+      class="vc-message"
+      :class="[`vc-message--${type}`]"
+      :style="style"
+    >
+      <span v-if="$slots.icon || icon" class="vc-message__icon">
+        <slot name="icon">
+          <component v-if="icon" :is="icon"></component>
+        </slot>
+      </span>
+      <span v-if="$slots.default" class="vc-message__content">
+        <slot>{{ content }}</slot>
+      </span>
+      <span v-else-if="content" class="vc-message__content">
+        {{ content }}
+      </span>
+      <button v-if="showClose" class="vc-message__close" @click="handleClose">
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  content: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'info',
+    validator: (val) => ['success', 'warning', 'danger', 'error', 'info'].includes(val)
+  },
+  icon: {
+    type: [String, Object],
+    default: null
+  },
+  showClose: {
+    type: Boolean,
+    default: false
+  },
+  duration: {
+    type: Number,
+    default: 3000
+  },
+  onClose: {
+    type: Function,
+    default: null
+  },
+  offset: {
+    type: Number,
+    default: 20
+  },
+  zIndex: {
+    type: Number,
+    default: 3000
+  }
+})
+
+const emit = defineEmits(['close'])
+
+const style = computed(() => ({
+  top: `${props.offset}px`,
+  zIndex: props.zIndex
+}))
+
+const handleClose = () => {
+  emit('close')
+  if (props.onClose) {
+    props.onClose()
+  }
+}
+
+onMounted(() => {
+  if (props.duration > 0) {
+    setTimeout(() => {
+      handleClose()
+    }, props.duration)
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.vc-message {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--vck-space-sm);
+  padding: var(--vck-space-sm) var(--vck-space-md);
+  background-color: var(--vck-bg);
+  border: 1px solid var(--vck-border);
+  border-radius: var(--vck-radius);
+  box-shadow: var(--vck-shadow-light);
+  color: var(--vck-text-primary);
+  font-size: 14px;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: opacity var(--vck-transition-fast), transform var(--vck-transition-fast);
+  z-index: 3000;
+
+  &--success {
+    background-color: var(--vck-bg-active);
+    border-color: var(--vck-primary);
+    color: var(--vck-primary);
+  }
+
+  &--warning {
+    background-color: rgba(245, 158, 11, 0.1);
+    border-color: var(--vck-warning);
+    color: var(--vck-warning);
+  }
+
+  &--danger,
+  &--error {
+    background-color: rgba(239, 68, 68, 0.1);
+    border-color: var(--vck-danger);
+    color: var(--vck-danger);
+  }
+
+  &--info {
+    background-color: rgba(59, 130, 246, 0.1);
+    border-color: var(--vck-info);
+    color: var(--vck-info);
+  }
+
+  &__icon {
+    display: inline-flex;
+    font-size: 16px;
+  }
+
+  &__content {
+    line-height: 1.5;
+  }
+
+  &__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    margin-left: var(--vck-space-xs);
+    border: none;
+    background: none;
+    color: var(--vck-text-muted);
+    cursor: pointer;
+    transition: color var(--vck-transition-fast);
+
+    &:hover {
+      color: var(--vck-text-primary);
+    }
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+}
+
+.vc-message-fade-enter-active,
+.vc-message-fade-leave-active {
+  transition: opacity var(--vck-transition-fast), transform var(--vck-transition-fast);
+}
+
+.vc-message-fade-enter-from {
+  opacity: 0;
+  transform: translate(-50%, -20px);
+}
+
+.vc-message-fade-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -20px);
+}
+</style>

package/src/components/ui/MessageBox.vue

@@ -0,0 +1,143 @@
+<template>
+  <Dialog
+    :model-value="visible"
+    :title="title"
+    :width="width"
+    :show-close="showClose"
+    :close-on-click-modal="closeOnClickModal"
+    @close="handleClose"
+    @update:model-value="handleUpdateVisible"
+  >
+    <div class="vc-message-box">
+      <div v-if="$slots.default || message" class="vc-message-box__content">
+        <slot>{{ message }}</slot>
+      </div>
+      <div v-if="$slots.input" class="vc-message-box__input">
+        <slot name="input"></slot>
+      </div>
+    </div>
+    <template #footer>
+      <Button v-if="showCancelButton" @click="handleCancel">{{ cancelButtonText }}</Button>
+      <Button v-if="showConfirmButton" type="primary" @click="handleConfirm" :loading="confirmLoading">
+        {{ confirmButtonText }}
+      </Button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Dialog from './Dialog.vue'
+import Button from './Button.vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '提示'
+  },
+  message: {
+    type: String,
+    default: ''
+  },
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+  showCancelButton: {
+    type: Boolean,
+    default: true
+  },
+  showConfirmButton: {
+    type: Boolean,
+    default: true
+  },
+  cancelButtonText: {
+    type: String,
+    default: '取消'
+  },
+  confirmButtonText: {
+    type: String,
+    default: '确定'
+  },
+  closeOnClickModal: {
+    type: Boolean,
+    default: true
+  },
+  width: {
+    type: [String, Number],
+    default: '420px'
+  }
+})
+
+const emit = defineEmits(['confirm', 'cancel', 'close', 'update:modelValue'])
+
+const visible = ref(false)
+const confirmLoading = ref(false)
+let resolveCallback = null
+let rejectCallback = null
+
+const open = () => {
+  visible.value = true
+  return new Promise((resolve, reject) => {
+    resolveCallback = resolve
+    rejectCallback = reject
+  })
+}
+
+const close = () => {
+  visible.value = false
+  confirmLoading.value = false
+}
+
+const handleUpdateVisible = (val) => {
+  visible.value = val
+  if (!val) {
+    emit('update:modelValue', val)
+    emit('close')
+  }
+}
+
+const handleClose = () => {
+  visible.value = false
+  emit('close')
+  if (rejectCallback) {
+    rejectCallback('cancel')
+  }
+}
+
+const handleCancel = () => {
+  visible.value = false
+  emit('cancel')
+  if (rejectCallback) {
+    rejectCallback('cancel')
+  }
+}
+
+const handleConfirm = () => {
+  confirmLoading.value = true
+  emit('confirm')
+  if (resolveCallback) {
+    resolveCallback('confirm')
+  }
+  setTimeout(() => {
+    visible.value = false
+    confirmLoading.value = false
+  }, 300)
+}
+
+defineExpose({ open, close })
+</script>
+
+<style scoped lang="scss">
+.vc-message-box {
+  &__content {
+    font-size: 14px;
+    color: var(--vck-text-primary);
+    line-height: 1.6;
+  }
+
+  &__input {
+    margin-top: var(--vck-space-md);
+  }
+}
+</style>

package/src/components/ui/MessageManager.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="vc-message-manager">
+    <Message
+      v-for="(message, index) in messages"
+      :key="message.id"
+      :visible="message.visible"
+      :content="message.content"
+      :type="message.type"
+      :icon="message.icon"
+      :show-close="message.showClose"
+      :duration="message.duration"
+      :offset="calculateOffset(index)"
+      :on-close="() => handleClose(message.id)"
+      @close="() => handleClose(message.id)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, provide, inject } from 'vue'
+import Message from './Message.vue'
+
+const MESSAGE_MANAGER_KEY = Symbol('messageManager')
+
+const messages = ref([])
+let nextId = 1
+
+const calculateOffset = (index) => {
+  return 20 + index * 56
+}
+
+const handleClose = (id) => {
+  const index = messages.value.findIndex(m => m.id === id)
+  if (index !== -1) {
+    messages.value[index].visible = false
+    setTimeout(() => {
+      const currentIndex = messages.value.findIndex(m => m.id === id)
+      if (currentIndex !== -1) {
+        messages.value.splice(currentIndex, 1)
+      }
+    }, 300)
+  }
+}
+
+const showMessage = (options) => {
+  const {
+    content,
+    type = 'info',
+    icon = null,
+    showClose = false,
+    duration = 3000
+  } = typeof options === 'string' ? { content: options } : options
+
+  const id = nextId++
+  messages.value.push({
+    id,
+    visible: true,
+    content,
+    type,
+    icon,
+    showClose,
+    duration
+  })
+
+  return () => handleClose(id)
+}
+
+const methods = {
+  show: showMessage,
+  success: (content, options = {}) => showMessage({ content, type: 'success', ...options }),
+  warning: (content, options = {}) => showMessage({ content, type: 'warning', ...options }),
+  error: (content, options = {}) => showMessage({ content, type: 'error', ...options }),
+  info: (content, options = {}) => showMessage({ content, type: 'info', ...options })
+}
+
+provide(MESSAGE_MANAGER_KEY, methods)
+</script>
+
+<style scoped>
+.vc-message-manager {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  z-index: 3000;
+}
+
+.vc-message-manager :deep(.vc-message) {
+  pointer-events: auto;
+}
+</style>

package/src/components/ui/Switch.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    :class="['vc-switch', { 'vc-switch-active': modelValue, 'vc-switch-disabled': disabled }]"
+    @click="handleClick"
+  >
+    <div class="vc-switch-handle"></div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const handleClick = () => {
+  if (props.disabled) return
+  emit('update:modelValue', !props.modelValue)
+}
+</script>
+
+<style scoped lang="scss">
+.vc-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 44px;
+  height: 22px;
+  border-radius: 11px;
+  background-color: var(--vck-text-muted);
+  transition: background-color 0.3s;
+  cursor: pointer;
+
+  &.vc-switch-active {
+    background-color: var(--vck-primary);
+  }
+
+  &.vc-switch-disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .vc-switch-handle {
+    position: absolute;
+    left: 2px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background-color: var(--vck-bg);
+    transition: transform 0.3s;
+  }
+
+  &.vc-switch-active .vc-switch-handle {
+    transform: translateX(22px);
+  }
+}
+</style>

package/src/components/ui/Tag.vue

@@ -0,0 +1,68 @@
+<template>
+  <span
+    class="vc-tag"
+    :class="[
+      `vc-tag--${type}`,
+      { 'vc-tag--disabled': disabled }
+    ]"
+  >
+    <slot></slot>
+  </span>
+</template>
+
+<script setup>
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'default',
+    validator: (val) => ['default', 'success', 'warning', 'danger', 'info'].includes(val)
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.vc-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 12px;
+  border-radius: 4px;
+  background-color: var(--vck-bg-panel);
+  color: var(--vck-text-secondary);
+  border: 1px solid var(--vck-border);
+  transition: all var(--vck-transition-fast);
+
+  &--success {
+    background-color: rgba(16, 185, 129, 0.1);
+    color: var(--vck-success);
+    border-color: rgba(16, 185, 129, 0.3);
+  }
+
+  &--warning {
+    background-color: rgba(245, 158, 11, 0.1);
+    color: var(--vck-warning);
+    border-color: rgba(245, 158, 11, 0.3);
+  }
+
+  &--danger {
+    background-color: rgba(239, 68, 68, 0.1);
+    color: var(--vck-danger);
+    border-color: rgba(239, 68, 68, 0.3);
+  }
+
+  &--info {
+    background-color: rgba(59, 130, 246, 0.1);
+    color: var(--vck-info);
+    border-color: rgba(59, 130, 246, 0.3);
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+</style>