@veltra/desktop 1.0.0

package/src/components/input/input.vue

@@ -0,0 +1,173 @@
+<template>
+  <div
+    :class="inputClass"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+    v-if="!readonly"
+  >
+    <span v-if="$slots.prefix || prefix" :class="prefixClass" @click="handlePrefixClick">
+      {{ prefix }}
+      <slot name="prefix"></slot>
+    </span>
+
+    <input
+      :class="cls.e('native')"
+      :placeholder="props.placeholder"
+      type="text"
+      :value="model"
+      @input="handleInput"
+      @change="handleChange"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @compositionstart="handleCompositionStart"
+      @compositionend="handleCompositionEnd"
+      autocomplete="off"
+      ref="el"
+      :disabled="disabled"
+      :readonly="nativeReadonly"
+    />
+    <UIcon
+      v-if="clearable && !disabled && model"
+      :class="[cls.e('clear'), bem.is('hidden', !hovered)]"
+      title="清除"
+      @click.stop="clearModelValue"
+    >
+      <Close />
+    </UIcon>
+    <span :class="suffixClass" @click="handleSuffixClick" v-if="$slots.suffix || suffix">
+      {{ suffix }}
+      <slot name="suffix"></slot>
+    </span>
+  </div>
+
+  <template v-else>
+    {{ generateModel || FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="tsx" setup>
+import { useFocus, useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { Close } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { computed, getCurrentInstance, ref, shallowRef, nextTick } from 'vue'
+
+import type { InputEmits, InputProps, _InputExposed } from '../../types'
+import { UIcon } from '../icon'
+
+defineOptions({
+  name: 'Input'
+})
+
+const props = withDefaults(defineProps<InputProps>(), {
+  placeholder: '请输入',
+  clearable: true,
+  disabled: undefined,
+  readonly: undefined
+})
+
+const emit = defineEmits<InputEmits>()
+
+const model = defineModel<string>()
+
+const inst = getCurrentInstance()
+
+const cls = bem('input')
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
+
+const { focus, handleBlur, handleFocus } = useFocus((focused) => {
+  if (focused) {
+    emit('focus')
+  } else {
+    emit('blur')
+  }
+})
+
+const inputClass = computed(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('disabled', disabled.value),
+    bem.is('readonly', readonly.value),
+    bem.is('focus', focus.value)
+  ]
+})
+
+const prefixClass = [cls.e('prefix'), bem.is('clickable', !!inst?.vnode.props?.['onPrefix:click'])]
+
+const suffixClass = [cls.e('suffix'), bem.is('clickable', !!inst?.vnode.props?.['onSuffix:click'])]
+
+let isComposing = false
+
+function handleCompositionStart() {
+  isComposing = true
+}
+
+function handleCompositionEnd(e: Event) {
+  isComposing = false
+  handleInput(e)
+}
+
+const handleInput = (e: Event) => {
+  if (isComposing) return
+
+  const inputVal = (e.target as HTMLInputElement).value
+  emit('native:input', e)
+
+  const valid = props.pattern?.test(inputVal) ?? true
+
+  if (!valid) return
+  model.value = inputVal
+}
+
+const handlePrefixClick = () => {
+  emit('prefix:click', model.value)
+}
+
+const handleSuffixClick = () => {
+  emit('suffix:click', model.value)
+}
+
+const clearModelValue = () => {
+  model.value = ''
+  emit('clear')
+}
+
+const hovered = ref(false)
+const handleMouseEnter = () => {
+  hovered.value = true
+}
+
+const handleMouseLeave = () => {
+  hovered.value = false
+}
+
+const handleChange = (e: Event) => {
+  const target = e.target as HTMLInputElement
+
+  const valid = props.pattern?.test(target.value) ?? true
+
+  if (valid) {
+    emit('change', target.value)
+  } else {
+    nextTick(() => {
+      target.value = model.value ?? ''
+    })
+  }
+}
+
+const el = shallowRef<HTMLInputElement>()
+
+const generateModel = computed(() => {
+  if (!model.value) return ''
+
+  return `${props.prefix ?? ''}${model.value}${props.suffix ?? ''}`
+})
+
+defineExpose<_InputExposed>({
+  el
+})
+</script>

package/src/components/input/style.scss

@@ -0,0 +1,101 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+@use 'sass:map';
+
+$root-name: input;
+
+@include m.b($root-name) {
+  vertical-align: middle;
+  line-height: 1;
+  box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+  transition: box-shadow 0.25s ease;
+  overflow: hidden;
+  width: 100%;
+
+  @include m.flex($display: inline-flex);
+
+  &:hover {
+    // 悬浮时边框颜色为 var(--u-color-primary);
+    box-shadow: inset 0 0 0px 1px fn.use-var(color, primary);
+  }
+
+  @include m.size using ($size) {
+    height: fn.use-var(form-component-height, $size);
+    border-radius: fn.use-var(radius, $size);
+    padding: 0 calc(fn.use-var(gap, $size) / 2);
+
+    @include m.bem($root-name, native) {
+      height: fn.use-var(form-component-height, $size);
+      line-height: fn.use-var(form-component-height, $size);
+    }
+
+    // @include m.bem($root-name, clear) {
+    //   font-size: fn.use-var(font-size-main, $size);
+    // }
+  }
+
+  @include m.is(focus) {
+    // 使用变量 color 和 primary 设置内阴影和边框颜色
+    box-shadow: inset 0 0 1px 1px fn.use-var(color, primary);
+  }
+
+  @include m.e(native) {
+    // 清除默认样式
+    outline: none;
+    border: none;
+    background-color: transparent;
+    width: 100%;
+    flex-grow: 1;
+    color: fn.use-var(text-color, main);
+    font-size: 1em;
+    padding: 0;
+    font-family: fn.use-var(font-family);
+
+    &:-webkit-autofill {
+      color: #fff !important;
+      background-color: transparent;
+    }
+
+    &::placeholder {
+      color: fn.use-var(text-color, placeholder);
+    }
+  }
+
+  @include m.e(prefix, suffix) {
+    font-size: 14px;
+    color: fn.use-var(text-color, main);
+    flex-shrink: 0;
+    min-width: 20px;
+    text-align: center;
+    height: 100%;
+    @include m.flex(inline-flex, $justify: center, $align: center);
+
+    @include m.is(clickable) {
+      cursor: pointer;
+    }
+  }
+
+  @include m.e(clear) {
+    flex-shrink: 0;
+    width: 20px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: fn.use-var(text-color, main);
+
+    @include m.is(hidden) {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  @include m.is(disabled) {
+    background-color: fn.use-var(color, disabled);
+    box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+    @include m.bem($root-name, native) {
+      cursor: not-allowed;
+    }
+  }
+}

package/src/components/input/style.ts

@@ -0,0 +1,3 @@
+import '../icon/style'
+import '@veltra/styles/anime/zoom-in.scss'
+import './style.scss'

package/src/components/layout/di.ts

@@ -0,0 +1,8 @@
+import type { BEM } from '@veltra/utils'
+import type { InjectionKey } from 'vue'
+
+interface LayoutContext {
+  cls: BEM<'layout'>
+}
+
+export const LayoutDIKey: InjectionKey<LayoutContext> = Symbol('LayoutDIKey')

package/src/components/layout/index.ts

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

package/src/components/layout/layout-resizer.vue

@@ -0,0 +1,83 @@
+<template>
+  <div
+    :class="className"
+    :style="{ transform: `translate3d(${offsets.x}, ${offsets.y}, 0)` }"
+    ref="resizerRef"
+  >
+    <u-icon :size="10"> <Move /> </u-icon>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useDrag } from '@veltra/compositions'
+import { Move } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, inject, shallowReactive, shallowRef } from 'vue'
+
+import { UIcon } from '../icon'
+import { LayoutDIKey } from './di'
+
+defineOptions({
+  name: 'LayoutResizer'
+})
+
+const props = defineProps<{
+  /** 是否横向 */
+  horizontal?: boolean
+  /** 默认偏移量 */
+  offset?: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'resize', offset: number): void
+  (e: 'resize-start'): void
+  (e: 'resize-end'): void
+}>()
+
+const { cls } = inject(LayoutDIKey)!
+
+const className = computed(() => {
+  return [cls.e('resizer'), bem.is('horizontal', props.horizontal)]
+})
+
+const resizerRef = shallowRef<HTMLDivElement>()
+
+let offset = props.offset ?? 0
+const offsets = shallowReactive({
+  x: props.horizontal ? '0' : offset + 'px',
+  y: props.horizontal ? offset + 'px' : '0'
+})
+let currentOffset = 0
+useDrag({
+  target: resizerRef,
+  onDragStart() {
+    currentOffset = offset
+    emit('resize-start')
+  },
+  onDrag({ x, y }) {
+    if (!props.horizontal) {
+      offset = currentOffset + x
+      offsets.x = offset + 'px'
+      emit('resize', x)
+    } else {
+      offset = currentOffset + y
+      offsets.y = offset + 'px'
+      emit('resize', y)
+    }
+  },
+  onDragEnd() {
+    emit('resize-end')
+  }
+})
+
+defineExpose({
+  update(_offset: number): void {
+    offset = _offset
+    if (!props.horizontal) {
+      offsets.x = offset + 'px'
+    } else {
+      offsets.y = offset + 'px'
+    }
+  }
+})
+</script>

package/src/components/layout/layout.vue

@@ -0,0 +1,138 @@
+<template>
+  <component :is="tag" :class="cls.b" :style="style" ref="containerRef">
+    <slot />
+
+    <!-- 竖向调节 -->
+    <ULayoutResizer
+      v-for="(offset, index) of resizerOffsets"
+      :offset="offset"
+      :key="index"
+      ref="resizerRefs"
+      direction="vertical"
+      @resize="handleResize($event, index)"
+      @resize-start="handleStartResize(index)"
+    >
+    </ULayoutResizer>
+
+    <!-- 横向调节 -->
+    <!-- <ULayoutResizer
+      v-for="item in horizontalResizerList"
+      :key="item"
+      direction="horizontal"
+    /> -->
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { useResizeObserver } from '@veltra/compositions'
+import { bem, withUnit } from '@veltra/utils'
+import {
+  computed,
+  shallowRef,
+  type CSSProperties,
+  provide,
+  watchEffect,
+  ref,
+  watch,
+  nextTick
+} from 'vue'
+
+import type { LayoutProps } from '../../types'
+import { LayoutDIKey } from './di'
+import ULayoutResizer from './layout-resizer.vue'
+
+defineOptions({
+  name: 'Layout'
+})
+
+const props = withDefaults(defineProps<LayoutProps>(), {
+  tag: 'div'
+})
+
+const cls = bem('layout')
+
+const templateCols = ref<string[]>([])
+
+watchEffect(() => {
+  const { cols } = props
+  if (!cols) {
+    templateCols.value = []
+    return
+  }
+  templateCols.value = typeof cols === 'string' ? cols.split(' ') : cols
+})
+
+const style = computed<CSSProperties>(() => {
+  const { rows, gap, resizable } = props
+  return {
+    gridTemplateColumns: templateCols.value.join(' '),
+    gridTemplateRows: rows ? (typeof rows === 'string' ? rows : rows.join(' ')) : '',
+    columnGap: resizable ? '10px' : withUnit(gap, 'px')
+  }
+})
+
+const containerRef = shallowRef<HTMLElement>()
+const resizerRefs = shallowRef<InstanceType<typeof ULayoutResizer>[]>([])
+
+const resizerOffsets = ref<number[]>([])
+
+function getResizeOffsets() {
+  const container = containerRef.value
+  if (!props.resizable || !container || !props.cols) {
+    return (resizerOffsets.value = [])
+  }
+
+  resizerOffsets.value = templateCols.value.slice(0, -1).map((_, index) => {
+    const dom = container.children[index] as HTMLElement
+    if (!dom) return 0
+    return dom.offsetLeft + dom.offsetWidth
+  })
+}
+
+watch([() => props.resizable, containerRef, () => props.cols], () => {
+  nextTick(() => {
+    getResizeOffsets()
+  })
+})
+
+useResizeObserver({
+  targets: containerRef,
+  onResize() {
+    getResizeOffsets()
+    resizerRefs.value.forEach((r, i) => {
+      r.update(resizerOffsets.value![i]!)
+    })
+  }
+})
+
+// const horizontalResizerList = []
+
+// const resizing = shallowRef(false)
+
+let prevSize = '0'
+let nextSize = '0'
+const handleStartResize = (index: number) => {
+  prevSize = templateCols.value[index]!
+  nextSize = templateCols.value[index + 1]!
+
+  if (!prevSize.endsWith('px') && !nextSize.endsWith('px')) {
+    const rect = containerRef.value?.children[index + 1]?.getBoundingClientRect()
+    if (rect) {
+      nextSize = rect.width + 'px'
+    }
+  }
+  // resizing.value = true
+}
+const handleResize = (offset: number, index: number) => {
+  if (prevSize?.endsWith('px')) {
+    templateCols.value[index] = `${parseInt(prevSize) + offset}px`
+  }
+  if (nextSize?.endsWith('px')) {
+    templateCols.value[index + 1] = `${parseInt(nextSize) - offset}px`
+  }
+}
+
+provide(LayoutDIKey, {
+  cls
+})
+</script>

package/src/components/layout/style.scss

@@ -0,0 +1,25 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+@include m.b(layout) {
+  display: grid;
+  position: relative;
+
+  @include m.e(resizer) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    cursor: col-resize;
+    background-color: fn.use-var(bg-color, middle);
+    // box-shadow: fn.use-var(shadow);
+    height: 100%;
+    width: 10px;
+    @include m.flex($align: center, $justify: center);
+
+    // @include m.is(horizontal) {
+    //   height: 6px;
+    //   width: 100%;
+    // }
+  }
+}

package/src/components/layout/style.ts

@@ -0,0 +1,2 @@
+import '../icon/style'
+import './style.scss'

package/src/components/list/index.ts

@@ -0,0 +1,3 @@
+export { default as UList } from './list.vue'
+
+export { default as UListItem } from './list-item.vue'

package/src/components/list/list-item.vue

@@ -0,0 +1,15 @@
+<template>
+  <li :class="cls.b">
+    <slot />
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+
+defineOptions({
+  name: 'ListItem'
+})
+
+const cls = bem('list-item')
+</script>

package/src/components/list/list.vue

@@ -0,0 +1,26 @@
+<template>
+  <u-scroll tag="ul" :class="[cls.b, cls.m(size)]">
+    <slot v-for="(item, index) of data" v-bind="{ item, index }" />
+  </u-scroll>
+</template>
+
+<script lang="ts" setup>
+import { useFallbackProps } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+
+import type { ListProps } from '../../types'
+import type { ComponentSize } from '../../types'
+import { UScroll } from '../scroll'
+
+defineOptions({
+  name: 'List'
+})
+
+const props = withDefaults(defineProps<ListProps>(), {})
+
+const { size } = useFallbackProps([props], {
+  size: 'default' as ComponentSize
+})
+
+const cls = bem('list')
+</script>

package/src/components/list/style.scss

@@ -0,0 +1,16 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$root-name: list;
+$item-name: $root-name + '-item';
+@include m.b($root-name) {
+  @include m.size using ($size) {
+    @include m.b($item-name) {
+      padding: 0 fn.use-var(gap, $size);
+      border-radius: fn.use-var(radius, $size);
+      height: fn.use-var(form-component-height, $size);
+      line-height: fn.use-var(form-component-height, $size);
+    }
+  }
+}

package/src/components/list/style.ts

@@ -0,0 +1,2 @@
+import '../button/style'
+import './style.scss'

package/src/components/loading/directive.ts

@@ -0,0 +1,34 @@
+import { bem } from '@veltra/utils'
+import { createVNode, render, type DirectiveBinding, type ObjectDirective } from 'vue'
+
+import type { LoadingType } from '../../types'
+import LoadingComponent from './loading.vue'
+
+const loadingCls = bem('loading')
+const loadingContainerCls = loadingCls.e('container')
+
+function renderLoading(el: HTMLElement, binding: DirectiveBinding) {
+  el.classList.add(loadingContainerCls)
+
+  const node = createVNode(LoadingComponent, { type: binding.arg as LoadingType })
+
+  render(node, el)
+}
+
+function removeLoading(el: HTMLElement) {
+  render(null, el)
+  el.classList.remove(loadingContainerCls)
+}
+export const vLoading: ObjectDirective<HTMLElement> = {
+  mounted(el, binding) {
+    binding.value && renderLoading(el, binding)
+  },
+
+  updated(el, binding) {
+    binding.value ? renderLoading(el, binding) : removeLoading(el)
+  },
+
+  unmounted(el) {
+    removeLoading(el)
+  }
+}

package/src/components/loading/index.ts

@@ -0,0 +1,3 @@
+export { default as ULoading } from './loading.vue'
+
+export { vLoading } from './directive'

package/src/components/loading/loading.vue

@@ -0,0 +1,33 @@
+<template>
+  <transition name="fade" appear>
+    <div :class="className" :style="{ zIndex: zIndex() }">
+      <div :class="cls.e('loader')"></div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+import { useFallbackProps } from '@veltra/compositions'
+import { bem, zIndex } from '@veltra/utils'
+import { computed } from 'vue'
+
+import type { LoadingProps, ComponentSize } from '../../types'
+
+defineOptions({
+  name: 'Loading'
+})
+
+const props = withDefaults(defineProps<LoadingProps>(), {
+  type: 'spinner'
+})
+
+const { size } = useFallbackProps([props], {
+  size: 'default' as ComponentSize
+})
+
+const cls = bem('loading')
+
+const className = computed(() => {
+  return [cls.b, cls.m(size.value), cls.e(props.type)]
+})
+</script>