vft 0.0.1 → 0.0.3

package/src/web/input/index.vue

@@ -1,533 +0,0 @@
-<script lang="ts" setup>
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { UPDATE_MODEL_EVENT } from '@vri/constants';
-import { useAttrs } from '@vri/use';
-import { isObject, noop, isString, singleAttrToObj, addUnit } from '@vri/utils';
-import { isClient, useResizeObserver } from '@vueuse/core';
-import { useCursor, useDisabled, useFormItem, useFormItemInputId, useSize } from 'element-plus';
-import { isNil } from 'lodash';
-import { Icon as VriIcon, type IconProps } from '../../common';
-import type { StyleValue } from 'vue';
-import {
-  computed,
-  nextTick,
-  onMounted,
-  ref,
-  shallowRef,
-  useAttrs as useRawAttrs,
-  useSlots,
-  watch,
-  getCurrentInstance
-} from 'vue';
-import { calcTextareaHeight } from './utils';
-import { useNamespace } from '../../use';
-import { debugWarn } from '../../utils';
-
-type TargetElement = HTMLInputElement | HTMLTextAreaElement;
-
-interface InputProps {
-  id?: string;
-  size?: 'default' | 'small' | 'large';
-  disabled?: boolean;
-  modelValue?: string | number;
-  type?: string;
-  resize?: 'none' | 'both' | 'horizontal' | 'vertical';
-  autosize?: {minRows?: number; maxRows?: number} | boolean;
-  autocomplete?: string;
-  formatter?: Function;
-  parser?: Function;
-  placeholder?: string;
-  form?: string;
-  readonly?: boolean;
-  clearable?: boolean;
-  showPassword?: boolean;
-  showWordLimit?: boolean;
-  suffixIcon?: IconProps;
-  prefixIcon?: IconProps;
-  clearIcon?: IconProps;
-  containerRole?: string;
-  label?: string;
-  tabindex?: string | number;
-  validateEvent?: boolean;
-  inputStyle?: StyleValue;
-  focusWidth?: Numberish
-}
-
-const {
-  id,
-  size = '',
-  disabled,
-  type = 'text',
-  autosize = false,
-  autocomplete = 'off',
-  tabindex = 0,
-  validateEvent = true,
-  modelValue,
-  resize,
-  formatter,
-  parser,
-  placeholder,
-  form,
-  readonly,
-  clearable,
-  showPassword,
-  showWordLimit,
-  suffixIcon,
-  prefixIcon,
-  clearIcon,
-  containerRole,
-  label,
-  inputStyle,
-  focusWidth
-} = defineProps<InputProps>();
-
-const emit = defineEmits({
-  [UPDATE_MODEL_EVENT]: (value: string) => isString(value),
-  input: (value: string) => isString(value),
-  change: (value: string) => isString(value),
-  suffixclick: (value) => isString(value),
-  focus: (evt: FocusEvent) => evt instanceof FocusEvent,
-  blur: (evt: FocusEvent) => evt instanceof FocusEvent,
-  clear: () => true,
-  mouseleave: (evt: MouseEvent) => evt instanceof MouseEvent,
-  mouseenter: (evt: MouseEvent) => evt instanceof MouseEvent,
-  // NOTE: when autofill by browser, the keydown event is instanceof Event, not KeyboardEvent
-  // relative bug report https://github.com/element-plus/element-plus/issues/6665
-  keydown: (evt: KeyboardEvent | Event) => evt instanceof Event,
-  compositionstart: (evt: CompositionEvent) => evt instanceof CompositionEvent,
-  compositionupdate: (evt: CompositionEvent) => evt instanceof CompositionEvent,
-  compositionend: (evt: CompositionEvent) => evt instanceof CompositionEvent
-});
-
-const rawAttrs = useRawAttrs();
-const slots = useSlots();
-
-const containerAttrs = computed(() => {
-  const comboBoxAttrs: Record<string, unknown> = {};
-  if (containerRole === 'combobox') {
-    comboBoxAttrs['aria-haspopup'] = rawAttrs['aria-haspopup'];
-    comboBoxAttrs['aria-owns'] = rawAttrs['aria-owns'];
-    comboBoxAttrs['aria-expanded'] = rawAttrs['aria-expanded'];
-  }
-  return comboBoxAttrs;
-});
-
-const containerKls = computed(() => [
-  type === 'textarea' ? nsTextarea.b() : nsInput.b(),
-  nsInput.m(inputSize.value),
-  nsInput.is('disabled', inputDisabled.value),
-  nsInput.is('exceed', inputExceed.value),
-  nsInput.is('focus', focused.value),
-  {
-    [nsInput.b('group')]: slots.prepend || slots.append,
-    [nsInput.bm('group', 'append')]: slots.append,
-    [nsInput.bm('group', 'prepend')]: slots.prepend,
-    [nsInput.m('prefix')]: slots.prefix || prefixIcon,
-    [nsInput.m('suffix')]: slots.suffix || suffixIcon || clearable || showPassword,
-    [nsInput.bm('suffix', 'password-clear')]: showClear.value && showPwdVisible.value
-  },
-  rawAttrs.class
-]);
-
-const instance = getCurrentInstance()!;
-
-const wrapperKls = computed(() => [nsInput.e('wrapper'), nsInput.is('focus', focused.value)]);
-
-const attrs = useAttrs({
-  excludeKeys: computed<string[]>(() => {
-    return Object.keys(containerAttrs.value);
-  })
-});
-
-const { form: _form, formItem } = useFormItem();
-const { inputId } = useFormItemInputId(instance.props, {
-  formItemContext: formItem
-});
-const inputSize = useSize();
-const inputDisabled = useDisabled();
-const nsInput = useNamespace('input');
-const nsTextarea = useNamespace('textarea');
-
-const input = shallowRef<HTMLInputElement>();
-const textarea = shallowRef<HTMLTextAreaElement>();
-
-const focused = ref(false);
-const hovering = ref(false);
-const isComposing = ref(false);
-const passwordVisible = ref(false);
-const countStyle = ref<StyleValue>();
-const textareaCalcStyle = shallowRef(inputStyle);
-
-const _ref = computed(() => input.value || textarea.value);
-
-const _prefixIcon = computed(() => {
-  return singleAttrToObj(prefixIcon, 'icon') as IconProps;
-});
-
-const _suffixIcon = computed(() => {
-  return singleAttrToObj(suffixIcon, 'icon') as IconProps;
-});
-
-const _clearIcon = computed(() => {
-  return singleAttrToObj(clearIcon, 'icon', { icon: 'vi-close-full', size: 16 }) as IconProps;
-});
-
-const needStatusIcon = computed(() => _form?.statusIcon ?? false);
-const validateState = computed(() => formItem?.validateState || '');
-const validateIcon = computed(() => validateState.value && 'vi-user');
-const passwordIcon = computed(
-  () => (passwordVisible.value ? { icon: 'vi-view', size: 16 } : { icon: 'vi-no-view', size: 16 }));
-const containerStyle = computed<StyleValue>(() => [rawAttrs.style as StyleValue, inputStyle!,
-  focusWidth && focused.value ? { width: addUnit(focusWidth) } : {}]);
-
-const textareaStyle = computed<StyleValue>(
-  () => [inputStyle!, textareaCalcStyle.value as StyleValue, { resize: resize }]);
-const nativeInputValue = computed(() => (isNil(modelValue) ? '' : String(modelValue)));
-const showClear = computed(
-  () => clearable && !inputDisabled.value && !readonly && !!nativeInputValue.value && (focused.value || hovering.value));
-const showPwdVisible = computed(
-  () => showPassword && !inputDisabled.value && !readonly && !!nativeInputValue.value && (!!nativeInputValue.value || focused.value));
-const isWordLimitVisible = computed(
-  () => showWordLimit && !!attrs.value.maxlength && (type === 'text' || type === 'textarea') && !inputDisabled.value && !readonly && !showPassword);
-const textLength = computed(() => Array.from(nativeInputValue.value).length);
-const inputExceed = computed(
-  () =>
-    // show exceed style if length of initial value greater then maxlength
-    !!isWordLimitVisible.value && textLength.value > Number(attrs.value.maxlength)
-);
-const suffixVisible = computed(
-  () => !!slots.suffix || !!suffixIcon || showClear.value || showPassword || isWordLimitVisible.value || (!!validateState.value && needStatusIcon.value));
-
-const [recordCursor, setCursor] = useCursor(input);
-
-useResizeObserver(textarea, (entries) => {
-  if (!isWordLimitVisible.value || resize !== 'both') return;
-  const entry = entries[0];
-  const { width } = entry.contentRect;
-  countStyle.value = {
-    /** right: 100% - width + padding(15) + right(6) */
-    right: `calc(100% - ${width + 15 + 6}px)`
-  };
-});
-
-const resizeTextarea = () => {
-  if (!isClient || type !== 'textarea') return;
-
-  if (autosize) {
-    const minRows = isObject(autosize) ? autosize.minRows : undefined;
-    const maxRows = isObject(autosize) ? autosize.maxRows : undefined;
-    textareaCalcStyle.value = {
-      ...calcTextareaHeight(textarea.value!, minRows, maxRows)
-    };
-  } else {
-    textareaCalcStyle.value = {
-      minHeight: calcTextareaHeight(textarea.value!).minHeight
-    };
-  }
-};
-
-const setNativeInputValue = () => {
-  const input = _ref.value;
-  if (!input || input.value === nativeInputValue.value) return;
-  input.value = nativeInputValue.value;
-};
-
-const handleInput = async(event: InputEvent) => {
-  recordCursor();
-
-  let { value } = event.target as TargetElement;
-
-  // 处理 number 下 maxlength 失效的问题
-  if (attrs.value.maxlength && value.length >= attrs.value.maxlength) {
-    value = value.slice(0, Number(attrs.value.maxlength));
-  }
-
-  if (formatter) {
-    value = parser ? parser(value) : value;
-    value = formatter(value);
-  }
-
-  // should not emit input during composition
-  // see: https://github.com/ElemeFE/element/issues/10516
-  if (isComposing.value) return;
-
-  // hack for https://github.com/ElemeFE/element/issues/8548
-  // should remove the following line when we don't support IE
-  if (value === nativeInputValue.value) {
-    setNativeInputValue();
-    return;
-  }
-
-  emit(UPDATE_MODEL_EVENT, value);
-  emit('input', value);
-
-  // ensure native input value is controlled
-  // see: https://github.com/ElemeFE/element/issues/12850
-  await nextTick();
-  setNativeInputValue();
-  setCursor();
-};
-
-const handleChange = (event: Event) => {
-  emit('change', (event.target as TargetElement).value);
-};
-
-const handleSuffixClick = () => {
-  emit('suffixclick', modelValue);
-};
-
-const handleCompositionStart = (event: CompositionEvent) => {
-  emit('compositionstart', event);
-  isComposing.value = true;
-};
-
-const isKorean = (text: string) => /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi.test(text);
-
-const handleCompositionUpdate = (event: CompositionEvent) => {
-  emit('compositionupdate', event);
-  const text = (event.target as HTMLInputElement)?.value;
-  const lastCharacter = text[text.length - 1] || '';
-  isComposing.value = !isKorean(lastCharacter);
-};
-
-const handleCompositionEnd = (event: CompositionEvent) => {
-  emit('compositionend', event);
-  if (isComposing.value) {
-    isComposing.value = false;
-    handleInput(event);
-  }
-};
-
-const handlePasswordVisible = () => {
-  passwordVisible.value = !passwordVisible.value;
-  focus();
-};
-
-const focus = async() => {
-  // see: https://github.com/ElemeFE/element/issues/18573
-  await nextTick();
-  _ref.value?.focus();
-};
-
-const blur = () => _ref.value?.blur();
-
-const handleFocus = (event: FocusEvent) => {
-  focused.value = true;
-  emit('focus', event);
-};
-
-const handleBlur = (event: FocusEvent) => {
-  focused.value = false;
-  emit('blur', event);
-  if (validateEvent) {
-    formItem?.validate?.('blur').catch((err) => debugWarn(err));
-  }
-};
-
-const handleMouseLeave = (evt: MouseEvent) => {
-  hovering.value = false;
-  emit('mouseleave', evt);
-};
-
-const handleMouseEnter = (evt: MouseEvent) => {
-  hovering.value = true;
-  emit('mouseenter', evt);
-};
-
-const handleKeydown = (evt: KeyboardEvent) => {
-  let key = evt.key;
-  if ((evt.target as TargetElement).type === 'number') {
-    const forbidKey = ['e', '+', '-0', 'E'];
-    if (forbidKey.includes(key)){
-      evt.returnValue = false;
-      return false;
-    }
-  }
-
-  emit('keydown', evt);
-};
-
-const select = () => {
-  _ref.value?.select();
-};
-
-const clear = () => {
-  emit(UPDATE_MODEL_EVENT, '');
-  emit('change', '');
-  emit('clear');
-  emit('input', '');
-};
-
-watch(
-  () => modelValue,
-  () => {
-    nextTick(() => resizeTextarea());
-    if (validateEvent) {
-      formItem?.validate?.('change').catch((err) => debugWarn(err));
-    }
-  }
-);
-
-// native input value is set explicitly
-// do not use v-model / :value in template
-// see: https://github.com/ElemeFE/element/issues/14521
-watch(nativeInputValue, () => setNativeInputValue());
-
-// when change between <input> and <textarea>,
-// update DOM dependent value and styles
-// https://github.com/ElemeFE/element/issues/14857
-watch(
-  () => type,
-  async() => {
-    await nextTick();
-    setNativeInputValue();
-    resizeTextarea();
-  }
-);
-
-onMounted(() => {
-  if (!formatter && parser) {
-    debugWarn('VriInput', 'If you set the parser, you also need to set the formatter.');
-  }
-  setNativeInputValue();
-  nextTick(resizeTextarea);
-});
-
-defineExpose({
-  /** @description HTML input element */
-  input,
-  /** @description HTML textarea element */
-  textarea,
-  /** @description HTML element, input or textarea */
-  ref: _ref,
-  /** @description style of textarea. */
-  textareaStyle,
-
-  /** @description from props (used on unit test) */
-  autosize,
-
-  /** @description HTML input element native method */
-  focus,
-  /** @description HTML input element native method */
-  blur,
-  /** @description HTML input element native method */
-  select,
-  /** @description clear input value */
-  clear,
-  /** @description resize textarea. */
-  resizeTextarea
-});
-</script>
-
-<template>
-  <div v-show="type !== 'hidden'" v-bind="containerAttrs" :class="containerKls"
-    :style="containerStyle" :role="containerRole" @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave">
-    <!-- input -->
-    <template v-if="type !== 'textarea'">
-      <!-- prepend slot -->
-      <div v-if="$slots.prepend" :class="nsInput.be('group', 'prepend')">
-        <slot name="prepend" />
-      </div>
-
-      <div :class="wrapperKls">
-        <!-- prefix slot -->
-        <span v-if="$slots.prefix || _prefixIcon?.icon" :class="nsInput.e('prefix')">
-          <span :class="nsInput.e('prefix-inner')" @click="focus">
-            <slot name="prefix" />
-            <vri-icon v-if="_prefixIcon?.icon" v-bind="_prefixIcon" :class="nsInput.e('icon')" />
-          </span>
-        </span>
-
-        <input
-          :id="inputId"
-          ref="input"
-          :class="nsInput.e('inner')"
-          v-bind="attrs"
-          :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
-          :disabled="inputDisabled"
-          :formatter="formatter"
-          :parser="parser"
-          :readonly="readonly"
-          :autocomplete="autocomplete"
-          :tabindex="tabindex"
-          :aria-label="label"
-          :placeholder="placeholder"
-          :style="inputStyle"
-          :form="form"
-          @compositionstart="handleCompositionStart"
-          @compositionupdate="handleCompositionUpdate"
-          @compositionend="handleCompositionEnd"
-          @input="handleInput"
-          @focus="handleFocus"
-          @blur="handleBlur"
-          @change="handleChange"
-          @keydown="handleKeydown"
-        />
-
-        <!-- suffix slot -->
-        <span v-if="suffixVisible" :class="nsInput.e('suffix')">
-          <span :class="nsInput.e('suffix-inner')" @click="focus">
-            <template v-if="!showClear || !showPwdVisible || !isWordLimitVisible">
-              <slot name="suffix" />
-              <vri-icon
-                @click="handleSuffixClick"
-                v-if="_suffixIcon?.icon" v-bind="_suffixIcon" :class="nsInput.e('icon')" />
-            </template>
-            <vri-icon v-if="showClear" :class="[nsInput.e('icon'), nsInput.e('clear')]"
-              v-bind="_clearIcon" @mousedown.prevent="noop" @click="clear" />
-            <vri-icon v-if="showPwdVisible" v-bind="passwordIcon"
-              :class="[nsInput.e('icon'), nsInput.e('password')]" @click="handlePasswordVisible" />
-            <span v-if="isWordLimitVisible" :class="nsInput.e('count')">
-              <span
-                :class="nsInput.e('count-inner')">{{ textLength }} / {{ attrs.maxlength }}</span>
-            </span>
-            <vri-icon
-              v-if="validateState && validateIcon && needStatusIcon"
-              :icon="validateIcon"
-              :class="[nsInput.e('icon'), nsInput.e('validateIcon'), nsInput.is('loading', validateState === 'validating')]"
-            />
-          </span>
-        </span>
-      </div>
-
-      <!-- append slot -->
-      <div v-if="$slots.append" :class="nsInput.be('group', 'append')">
-        <slot name="append" />
-      </div>
-    </template>
-
-    <!-- textarea -->
-    <template v-else>
-      <textarea
-        :id="inputId"
-        ref="textarea"
-        :class="nsTextarea.e('inner')"
-        v-bind="attrs"
-        :tabindex="tabindex"
-        :disabled="inputDisabled"
-        :readonly="readonly"
-        :autocomplete="autocomplete"
-        :style="textareaStyle"
-        :aria-label="label"
-        :placeholder="placeholder"
-        :form="form"
-        @compositionstart="handleCompositionStart"
-        @compositionupdate="handleCompositionUpdate"
-        @compositionend="handleCompositionEnd"
-        @input="handleInput"
-        @focus="handleFocus"
-        @blur="handleBlur"
-        @change="handleChange"
-        @keydown="handleKeydown"
-      />
-      <span v-if="isWordLimitVisible" :style="countStyle"
-        :class="nsInput.e('count')">{{ textLength }} / {{ attrs.maxlength }}</span>
-    </template>
-  </div>
-</template>
-
-
-<style lang="scss">
-@import './index.scss';
-</style>

package/src/web/input/utils.ts

@@ -1,102 +0,0 @@
-import { isNumber } from '@vri/utils';
-
-let hiddenTextarea: HTMLTextAreaElement | undefined = undefined;
-
-const HIDDEN_STYLE = `
-  height:0 !important;
-  visibility:hidden !important;
-  overflow:hidden !important;
-  position:absolute !important;
-  z-index:-1000 !important;
-  top:0 !important;
-  right:0 !important;
-`;
-
-const CONTEXT_STYLE = [
-  'letter-spacing',
-  'line-height',
-  'padding-top',
-  'padding-bottom',
-  'font-family',
-  'font-weight',
-  'font-size',
-  'text-rendering',
-  'text-transform',
-  'width',
-  'text-indent',
-  'padding-left',
-  'padding-right',
-  'border-width',
-  'box-sizing'
-];
-
-type NodeStyle = {
-  contextStyle: string;
-  boxSizing: string;
-  paddingSize: number;
-  borderSize: number;
-};
-
-type TextAreaHeight = {
-  height: string;
-  minHeight?: string;
-};
-
-function calculateNodeStyling(targetElement: Element): NodeStyle {
-  const style = window.getComputedStyle(targetElement);
-
-  const boxSizing = style.getPropertyValue('box-sizing');
-
-  const paddingSize = Number.parseFloat(style.getPropertyValue('padding-bottom')) + Number.parseFloat(style.getPropertyValue('padding-top'));
-
-  const borderSize = Number.parseFloat(style.getPropertyValue('border-bottom-width')) + Number.parseFloat(style.getPropertyValue('border-top-width'));
-
-  const contextStyle = CONTEXT_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join(';');
-
-  return { contextStyle, paddingSize, borderSize, boxSizing };
-}
-
-export function calcTextareaHeight(targetElement: HTMLTextAreaElement, minRows = 1, maxRows?: number): TextAreaHeight {
-  if (!hiddenTextarea) {
-    hiddenTextarea = document.createElement('textarea');
-    document.body.appendChild(hiddenTextarea);
-  }
-
-  const { paddingSize, borderSize, boxSizing, contextStyle } = calculateNodeStyling(targetElement);
-
-  hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
-  hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';
-
-  let height = hiddenTextarea.scrollHeight;
-  const result = {} as TextAreaHeight;
-
-  if (boxSizing === 'border-box') {
-    height = height + borderSize;
-  } else if (boxSizing === 'content-box') {
-    height = height - paddingSize;
-  }
-
-  hiddenTextarea.value = '';
-  const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-
-  if (isNumber(minRows)) {
-    let minHeight = singleRowHeight * minRows;
-    if (boxSizing === 'border-box') {
-      minHeight = minHeight + paddingSize + borderSize;
-    }
-    height = Math.max(minHeight, height);
-    result.minHeight = `${minHeight}px`;
-  }
-  if (isNumber(maxRows)) {
-    let maxHeight = singleRowHeight * maxRows;
-    if (boxSizing === 'border-box') {
-      maxHeight = maxHeight + paddingSize + borderSize;
-    }
-    height = Math.min(maxHeight, height);
-  }
-  result.height = `${height}px`;
-  hiddenTextarea.parentNode?.removeChild(hiddenTextarea);
-  hiddenTextarea = undefined;
-
-  return result;
-}

package/src/web/layouts/blank.vue

@@ -1,4 +0,0 @@
-<template>
-  <div/>
-</template>
-

package/src/web/layouts/footer/index.scss

@@ -1,31 +0,0 @@
-$name: layout-footer;
-
-@include set-root-css-vars($name, $layout-footer);
-
-@function getCompCssVar($value) {
-  @return getCssVar($name, $value);
-}
-
-@include b($name) {
-  // noinspection CssInvalidPropertyValue
-  width: calc(100% - getCompCssVar('left'));
-  background-color: getCompCssVar('bg-color');
-  height: getCompCssVar('height');
-  border-top: getCompCssVar('border-top');
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex: none;
-  overflow: hidden;
-  position: relative;
-  transition: left .5s;
-  left: getCompCssVar('left');
-
-  @include e(left) {
-    min-width: getCompCssVar('left-min-width');
-  }
-
-  @include e(right) {
-    min-width: getCompCssVar('right-min-width');
-  }
-}

package/src/web/layouts/footer/index.ts

@@ -1,3 +0,0 @@
-import LayoutFooter from './index.vue';
-
-export { LayoutFooter };