vft 0.0.1

package/src/common/badge/index.scss

@@ -0,0 +1,78 @@
+$name: badge;
+$badge: () !default;
+$badge: map-merge((
+  size: 16px,
+  color: white,
+  padding: 0 3px,
+  font-size: 12px,
+  font-weight: 400,
+  border-width: 1px,
+  background: red,
+  dot-color: red,
+  dot-size: 8px,
+), $badge);
+
+@include set-root-css-vars($name, $badge);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  display: inline-block;
+  box-sizing: border-box;
+  min-width: getCompCssVar('size');
+  padding: getCompCssVar('padding');
+  color: getCompCssVar('color');
+  font-weight: getCompCssVar('font-weight');
+  font-size: getCompCssVar('font-size');
+  line-height: 1.2;
+  text-align: center;
+  background: getCompCssVar('background');
+  border: getCompCssVar('border-width') solid white;
+  border-radius: 40%;
+
+  &--fixed {
+    position: absolute;
+    transform-origin: 100%;
+  }
+
+  &--top-left {
+    top: 0;
+    left: 0;
+    transform: translate(-50%, -50%);
+  }
+
+  &--top-right {
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+  }
+
+  &--bottom-left {
+    bottom: 0;
+    left: 0;
+    transform: translate(-50%, 50%);
+  }
+
+  &--bottom-right {
+    bottom: 0;
+    right: 0;
+    transform: translate(50%, 50%);
+  }
+
+  &--dot {
+    width: getCompCssVar('dot-size');
+    min-width: 0;
+    height: getCompCssVar('dot-size');
+    background: getCompCssVar('dot-color');
+    border-radius: 100%;
+    border: none;
+    padding: 0;
+  }
+
+  &__wrapper {
+    position: relative;
+    display: inline-block;
+  }
+}

package/src/common/badge/index.ts

@@ -0,0 +1,4 @@
+import Badge from './index.vue';
+
+export * from './types';
+export { Badge };

package/src/common/badge/index.vue

@@ -0,0 +1,111 @@
+<script setup lang="tsx">
+import { type CSSProperties, useSlots, computed } from 'vue';
+import { addUnit, isNullOrUndefined, isNumber } from '@vri/utils';
+import { VNode } from '@vri/utils';
+import { useNamespace } from '../../use';
+import { type BadgePosition } from './types';
+
+interface BadgeProps {
+  dot?: boolean;
+  isIcon?: boolean;
+  max?: Numberish;
+  color?: string;
+  offset?: Numberish[];
+  content?: Numberish;
+  showZero?: boolean;
+  position?: BadgePosition;
+}
+
+const { showZero = true, content, dot, max, color, offset, isIcon, position = 'top-right' } = defineProps<BadgeProps>();
+
+const ns = /* hoist-static*/ useNamespace('badge');
+
+defineOptions({
+	name: ns.b()
+});
+
+const slots = useSlots();
+
+// 是否有 content
+const hasContent = () => {
+  if (slots.content) {
+    return true;
+  }
+  return !isNullOrUndefined(content) && content !== '' && (showZero || content !== 0);
+};
+
+// content 内容
+const renderContent = () => {
+  if (!dot && hasContent()) {
+    if (slots.content) {
+      return slots.content();
+    }
+
+    if (!isNullOrUndefined(max) && isNumber(+content!) && +content! > +max!) {
+      return `${max}+`;
+    }
+
+    return content;
+  }
+};
+
+const style = computed(() => {
+  const _style: CSSProperties = {
+    background: color
+  };
+
+  if (offset) {
+    const [x, y] = offset;
+    if (slots.default) {
+      _style.top = addUnit(y);
+
+      if (typeof x === 'number') {
+        _style.right = addUnit(-x);
+      } else {
+        _style.right = x.startsWith('-') ? x.replace('-', '') : `-${x}`;
+      }
+    } else {
+      _style.marginTop = addUnit(y);
+      _style.marginLeft = addUnit(x);
+    }
+  }
+
+  return _style;
+});
+
+const renderBadgeCon = () => {
+  if (hasContent() || dot) {
+    return (
+      <div class={[ns.m(position), { dot: dot, fixed: !!slots.default }]} style={style.value}>
+        {renderContent()}
+      </div>
+    );
+  }
+};
+
+const renderBadge = () => {
+  if (slots.default) {
+    return isIcon ? (
+      <i class={ns.e('wrapper')}>
+        {slots.default()}
+        {renderBadgeCon()}
+      </i>
+    ) : (
+      <div class={ns.e('wrapper')}>
+        {slots.default()}
+        {renderBadgeCon()}
+      </div>
+    );
+  }
+
+  return renderBadgeCon();
+};
+</script>
+
+<template>
+  <VNode :content="renderBadge()" />
+</template>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/src/common/badge/types.ts

@@ -0,0 +1 @@
+export type BadgePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

package/src/common/clamp/clamp-toggle.vue

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import { generateCssVars } from '@vri/utils';
+import { useNamespace } from '../../use';
+import Clamp from './index.vue';
+import { computed } from 'vue';
+
+interface ClampProps {
+  text: string;
+  maxHeight?: string | number;
+  maxLines?: number;
+  expanded?: boolean;
+  location?: 'start' | 'middle' | 'end';
+  ellipsis?: string;
+  autoResize?: boolean;
+  color?: string
+  size?: Numberish
+  toggleColor?: string;
+  toggleSize?: Numberish;
+  toggleText?: Array<string>;
+}
+
+const {
+  text,
+  maxHeight,
+  maxLines = 1,
+  expanded = false,
+  location = 'end',
+  ellipsis = '…',
+  autoResize = false,
+  toggleText = ['展开', '收缩'],
+  color,
+  size,
+  toggleColor,
+  toggleSize
+} = defineProps<ClampProps>();
+
+const ns = /* hoist-static*/ useNamespace('clamp-toggle');
+
+defineOptions({
+  name: ns.b()
+});
+
+const style = computed(() => {
+	return generateCssVars({ color, size, toggleColor, toggleSize }, ns.b());
+});
+</script>
+
+<template>
+  <clamp
+    :style="style"
+    :text="text"
+    :maxHeight="maxHeight"
+    :maxLines="maxLines"
+    :expanded="expanded"
+    :location="location"
+    :ellipsis="ellipsis"
+    :autoResize="autoResize"
+  >
+    <template #after="{ toggle, expanded: isExpand, clamped }">
+      <span  v-if="isExpand || clamped" :class="['cursor-pointer', ns.e('more')]" @click="toggle">
+        {{ !isExpand ? toggleText[0] : toggleText[1] }}
+      </span>
+    </template>
+  </clamp>
+</template>
+
+<style lang="scss">
+$name: clamp-toggle;
+$clamp-toggle: () !default;
+$clamp-toggle: map-merge((
+	'toggle-color': #1382EF,
+	'toggle-size': 12px,
+  'color': #111,
+  'size': 12px,
+), $clamp-toggle);
+
+@include set-root-css-vars($name, $clamp-toggle);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  font-size: getCompCssVar('size');
+  color:getCompCssVar('color');
+	@include e(more) {
+    font-size: getCompCssVar('toggle-size');
+    color:getCompCssVar('toggle-color');
+  }
+}
+</style>

package/src/common/clamp/index.ts

@@ -0,0 +1,4 @@
+import Clamp from './index.vue';
+import ClampToggle from './clamp-toggle.vue';
+
+export { Clamp, ClampToggle };

package/src/common/clamp/index.vue

@@ -0,0 +1,247 @@
+<template>
+  <div
+    ref="textClampRef"
+    class="text-clamp"
+    :style="{
+      overflow: 'hidden',
+      maxHeight: realMaxHeight,
+    }"
+  >
+    <span ref="contentRef">
+      <slot
+        name="before"
+        :expand="expand"
+        :collapse="collapse"
+        :toggle="toggle"
+        :clamped="isClamped"
+        :expanded="state.localExpanded"
+      />
+      <span ref="textRef" :aria-label="text" />
+      <slot
+        name="after"
+        :expand="expand"
+        :collapse="collapse"
+        :toggle="toggle"
+        :clamped="isClamped"
+        :expanded="state.localExpanded"
+      />
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { addUnit } from '@vri/utils';
+import { computed, ref, reactive, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { addListener, removeListener } from 'resize-detector';
+import { useNamespace } from '../../use';
+
+interface ClampProps {
+  text: string;
+  maxHeight?: string | number;
+  maxLines?: number;
+  expanded?: boolean;
+  location?: 'start' | 'middle' | 'end';
+  ellipsis?: string;
+  autoResize?: boolean;
+}
+
+const {
+  text,
+  maxHeight,
+  maxLines = 1,
+  expanded = false,
+  location = 'end',
+  ellipsis = '…',
+  autoResize = false
+} = defineProps<ClampProps>();
+
+const emits = defineEmits<{
+  (e: 'clamp-change', data: boolean): void;
+  (e: 'update:expanded', data: boolean): void;
+}>();
+
+const ns = /* hoist-static*/ useNamespace('clamp');
+
+defineOptions({
+  name: ns.b()
+});
+
+const textClampRef = ref<HTMLElement | null>(null);
+const contentRef = ref<HTMLElement | null>(null);
+const textRef = ref<HTMLElement | null>(null);
+const state = reactive({
+  offset: 0,
+  localExpanded: expanded,
+  unregisterResizeCallback: null as null | Function
+});
+
+const realMaxHeight = computed(() => {
+  if (state.localExpanded) return undefined;
+  if (!maxHeight) return undefined;
+  return addUnit(maxHeight);
+});
+
+const applyChange = () => {
+  textRef.value && (textRef.value.textContent = realText.value);
+};
+const update = () => {
+  if (state.localExpanded) return;
+  applyChange();
+  if (isOverflow() || isClamped.value) {
+    search();
+  }
+};
+const init = () => {
+  if (!text) return;
+  state.offset = text.length;
+  cleanUp();
+  if (autoResize && textClampRef.value) {
+    addListener(textClampRef.value, update);
+    state.unregisterResizeCallback = () => {
+      textClampRef.value && removeListener(textClampRef.value, update);
+    };
+  }
+  update();
+};
+const cleanUp = () => {
+  state.unregisterResizeCallback?.();
+};
+
+const isOverflow = () => {
+  if (!maxLines && !maxHeight) return false;
+  if (!textClampRef.value) return false;
+  if (maxLines && getLines() > maxLines) return true;
+  return !!(maxHeight && textClampRef.value.scrollHeight > textClampRef.value.offsetHeight);
+
+};
+const getLines = () => {
+  if (!contentRef.value) return 0;
+  return Object.keys(
+    Array.prototype.slice.call(contentRef.value.getClientRects()).reduce((prev, {
+      top,
+      bottom
+    }) => {
+      const key = `${top}/${bottom}`;
+      if (!prev[key]) {
+        prev[key] = true;
+      }
+      return prev;
+    }, {})
+  ).length;
+};
+const search = (...range: number[]) => {
+  const [from = 0, to = state.offset] = range;
+  if (to - from <= 3) {
+    stepToFit();
+    return;
+  }
+  const target = Math.floor((to + from) / 2);
+  clampAt(target);
+  if (isOverflow()) {
+    search(from, target);
+  } else {
+    search(target, to);
+  }
+};
+const clampAt = (offset: number) => {
+  state.offset = offset;
+  applyChange();
+};
+const stepToFit = () => {
+  fill();
+  clamp();
+};
+const fill = () => {
+  while ((!isOverflow() || getLines() < 2) && state.offset < text.length) {
+    moveEdge(1);
+  }
+};
+const clamp = () => {
+  while (isOverflow() && getLines() > 1 && state.offset > 0) {
+    moveEdge(-1);
+  }
+};
+const moveEdge = (steps: number) => {
+  clampAt(state.offset + steps);
+};
+
+const isClamped = computed(() => {
+  if (!text) return false;
+  return state.offset !== text.length;
+});
+watch(
+  () => isClamped.value,
+  (val: boolean) => {
+    nextTick(() => {
+      emits('clamp-change', val);
+    });
+  },
+  { immediate: true }
+);
+const realText = computed(() => {
+  return isClamped.value ? clampedText.value : text;
+});
+
+const clampedText = computed(() => {
+  if (location === 'start') {
+    return ellipsis + (text.slice(0, state.offset) || '').trim();
+  }
+  if (location === 'middle') {
+    const split = Math.floor(state.offset / 2);
+    return (text.slice(0, split) || '').trim() + ellipsis + (text.slice(-split) || '').trim();
+  }
+  return (text.slice(0, state.offset) || '').trim() + ellipsis;
+});
+
+const expand = () => {
+  state.localExpanded = true;
+};
+const collapse = () => {
+  state.localExpanded = false;
+};
+const toggle = () => {
+  state.localExpanded = !state.localExpanded;
+};
+watch(
+  () => expanded,
+  (val: boolean) => {
+    state.localExpanded = val;
+  }
+);
+watch(
+  () => state.localExpanded,
+  (val: boolean) => {
+    if (val) {
+      clampAt(text.length);
+    } else {
+      update();
+    }
+    if (expanded !== val) {
+      emits('update:expanded', val);
+    }
+  }
+);
+
+watch(
+  () => [maxLines, maxHeight, ellipsis, location, isClamped.value].join(),
+  () => {
+    nextTick(() => {
+      update();
+    });
+  }
+);
+watch(
+  () => [text, autoResize].join(),
+  () => {
+    nextTick(() => {
+      init();
+    });
+  }
+);
+onUnmounted(() => {
+  cleanUp();
+});
+onMounted(() => {
+  init();
+});
+</script>