vft 0.0.1 → 0.0.3

package/src/common/badge/index.scss

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

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

package/src/common/badge/index.vue

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

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

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

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

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

package/src/common/clamp/index.vue

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