vft 0.0.1

package/src/web/input/index.vue

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

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

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

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

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

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