vft 0.0.1

package/src/web/select/useOption.ts

@@ -0,0 +1,146 @@
+import { computed, getCurrentInstance, inject, toRaw, unref, watch } from 'vue';
+import { get } from 'lodash';
+import { selectGroupKey, selectKey } from './token';
+
+export const escapeStringRegexp = (string = '') =>
+  string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
+
+import type { Ref } from 'vue';
+import type { QueryChangeCtx } from './token';
+
+export function useOption(props, states) {
+  // inject
+  const select = inject(selectKey);
+  const selectGroup = inject(selectGroupKey, { disabled: false });
+
+  // computed
+  const isObject = computed(() => {
+    return (
+      Object.prototype.toString.call(props.value).toLowerCase() ===
+      '[object object]'
+    );
+  });
+
+  const itemSelected = computed(() => {
+    if (!select?.props.multiple) {
+      return isEqual(props.value, select?.props.modelValue);
+    } else {
+      return contains(select?.props.modelValue as unknown[], props.value);
+    }
+  });
+
+  const limitReached = computed(() => {
+    if (select?.props.multiple) {
+      const modelValue = (select?.props.modelValue || []) as unknown[];
+      return (
+        !itemSelected.value &&
+        modelValue.length >= select?.props.multipleLimit &&
+        select?.props.multipleLimit > 0
+      );
+    } else {
+      return false;
+    }
+  });
+
+  const currentLabel = computed(() => {
+    return props.label || (isObject.value ? '' : props.value);
+  });
+
+  const currentValue = computed(() => {
+    return props.value || props.label || '';
+  });
+
+  const isDisabled = computed(() => {
+    return props.disabled || states.groupDisabled || limitReached.value;
+  });
+
+  const instance = getCurrentInstance()!;
+
+  const contains = (arr = [], target) => {
+    if (!isObject.value) {
+      return arr && arr.includes(target);
+    } else {
+      const valueKey = select?.props.valueKey;
+      return (
+        arr &&
+        arr.some((item) => {
+          return toRaw(get(item, valueKey)) === get(target, valueKey);
+        })
+      );
+    }
+  };
+
+  const isEqual = (a: unknown, b: unknown) => {
+    if (!isObject.value) {
+      return a === b;
+    } else {
+      const { valueKey } = select?.props;
+      return get(a, valueKey) === get(b, valueKey);
+    }
+  };
+
+  const hoverItem = () => {
+    if (!props.disabled && !selectGroup.disabled) {
+      select.hoverIndex = select?.optionsArray.indexOf(instance.proxy);
+    }
+  };
+
+  watch(
+    () => currentLabel.value,
+    () => {
+      if (!props.created && !select?.props.remote) select?.setSelected();
+    }
+  );
+
+  watch(
+    () => props.value,
+    (val, oldVal) => {
+      const { remote, valueKey } = select?.props;
+
+      if (!Object.is(val, oldVal)) {
+        select?.onOptionDestroy(oldVal, instance.proxy);
+        select?.onOptionCreate(instance.proxy);
+      }
+
+      if (!props.created && !remote) {
+        if (
+          valueKey &&
+          typeof val === 'object' &&
+          typeof oldVal === 'object' &&
+          val[valueKey] === oldVal[valueKey]
+        ) {
+          return;
+        }
+        select?.setSelected();
+      }
+    }
+  );
+
+  watch(
+    () => selectGroup.disabled,
+    () => {
+      states.groupDisabled = selectGroup.disabled;
+    },
+    { immediate: true }
+  );
+
+  const { queryChange } = toRaw(select);
+  watch(queryChange, (changes: Ref<QueryChangeCtx>) => {
+    const { query } = unref(changes);
+
+    const regexp = new RegExp(escapeStringRegexp(query), 'i');
+    states.visible = regexp.test(currentLabel.value) || props.created;
+    if (!states.visible) {
+      select.filteredOptionsCount--;
+    }
+  });
+
+  return {
+    select,
+    currentLabel,
+    currentValue,
+    itemSelected,
+    isDisabled,
+    hoverItem
+  };
+}