@toife/vue 3.1.5 → 3.1.6

package/src/components/field/outline/outline.vue

@@ -1,294 +0,0 @@
-<style lang="scss" src="./outline.scss" scoped></style>
-<template src="./outline.html"></template>
-<script lang="ts" setup>
-import { computed, nextTick, onMounted, ref, watch } from "vue";
-import type { FieldProps, FieldEmit } from "../field.type";
-import { cssProperty, cssPrefix } from "../../../utils";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<FieldProps>(), {
-  modelValue: "",
-  type: "text",
-  size: "standard",
-  disabled: false,
-  readonly: false,
-  message: "",
-  help: "",
-  variant: "fill",
-  placeholder: "",
-  shadow: undefined,
-  direction: undefined,
-});
-const emit = defineEmits<FieldEmit>();
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const isFocus = ref(false);
-const contentRef = ref<HTMLElement>();
-const caret = ref(0);
-const isComposing = ref(false);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const content = computed(() => {
-  if (props.value !== undefined && props.value !== null) {
-    return props.value;
-  }
-  return props.modelValue ?? "";
-});
-
-const isContentEmpty = computed(() => {
-  const v = content.value;
-  return v === "" || v === undefined || v === null;
-});
-
-const fieldAttrs = computed(() => {
-  return {
-    class: [
-      cssPrefix(["layer", "field"]),
-      cssPrefix(["role", props.role || ""]),
-      cssPrefix(["shape", props.shape || ""]),
-      cssPrefix("field"),
-      cssPrefix(["size", props.size]),
-      cssPrefix(["direction", props.direction || "left"]),
-      props.variant,
-      props.type,
-      {
-        disabled: props.disabled,
-        focus: isFocus.value,
-        shadow: props.shadow,
-        empty: isContentEmpty.value,
-        readonly: props.readonly,
-        typing: isComposing.value,
-      },
-    ],
-    style: {
-      [cssProperty(["field", "line"])]: props.line,
-      [cssProperty(["field", "max-line"])]: props.maxLine || props.line,
-    },
-  };
-});
-
-const fieldContentAttrs = computed(() => ({
-  class: [cssPrefix("field-content")],
-}));
-
-/** Outer shell: layout, placeholder pseudo-element (must stay off the contenteditable node on iOS). */
-const fieldInputShellAttrs = computed(() => ({
-  class: [cssPrefix("field-input")],
-  placeholder: props.placeholder,
-}));
-
-/** contenteditable as the literal string "true"|"false" improves mobile WebKit behavior vs boolean. */
-const fieldEditableAttrs = computed(() => ({
-  class: [cssPrefix("field-input-editable")],
-  name: props.name,
-  id: props.id,
-  contenteditable:
-    props.type === "password" ? undefined : props.disabled || props.readonly ? "false" : "true",
-  autocomplete: props.autocomplete,
-  tabindex: props.readonly ? 0 : props.disabled ? -1 : props.tabindex,
-}));
-
-const fieldPasswordInputAttrs = computed(() => ({
-  class: [cssPrefix("field-input")],
-  name: props.name,
-  id: props.id,
-  placeholder: props.placeholder,
-  autocomplete: props.autocomplete,
-  tabindex: props.readonly ? 0 : props.disabled ? -1 : props.tabindex,
-  readonly: props.readonly,
-  disabled: props.disabled,
-}));
-
-const fieldMessageAttrs = computed(() => ({
-  class: [cssPrefix("field-message")],
-}));
-
-const fieldHelpAttrs = computed(() => ({
-  class: [cssPrefix("field-help")],
-}));
-
-// Methods
-// ----------------------------------------------------------------------------
-const isBr = (node: Node): node is HTMLBRElement =>
-  node.nodeType === 1 && (node as HTMLElement).tagName === "BR";
-
-const isBlockLineBreak = (node: Node, parent: Node | null): node is HTMLElement =>
-  parent != null && node.nodeType === 1 && ["DIV", "P"].includes((node as HTMLElement).tagName);
-
-const getCaretOffset = (el: HTMLElement) => {
-  const selection = window.getSelection();
-  if (!selection || selection.rangeCount === 0) return 0;
-
-  const range = selection.getRangeAt(0);
-  const endContainer = range.endContainer;
-  const endOffset = range.endOffset;
-  let offset = 0;
-
-  function walk(node: Node, parent: Node | null): boolean {
-    if (node === endContainer) {
-      if (node.nodeType === 3) {
-        offset += endOffset;
-      } else if (isBr(node)) {
-        offset += endOffset > 0 ? 1 : 0;
-      } else if (isBlockLineBreak(node, parent)) {
-        offset += 1;
-      } else if (node === el) {
-        for (let i = 0; i < endOffset; i++) {
-          const child = node.childNodes[i];
-          if (!child) break;
-          if (child.nodeType === 3) offset += child.textContent?.length ?? 0;
-          else if (isBr(child)) offset += 1;
-          else if (isBlockLineBreak(child, el)) offset += 1;
-        }
-      }
-      return true;
-    }
-    if (node.nodeType === 3) {
-      offset += node.textContent?.length ?? 0;
-    } else if (isBr(node)) {
-      offset += 1;
-    } else if (isBlockLineBreak(node, parent)) {
-      offset += 1;
-    }
-    for (const child of Array.from(node.childNodes)) {
-      if (walk(child, node)) return true;
-    }
-    return false;
-  }
-  walk(el, null);
-  return offset;
-};
-
-const setCaretOffset = (el: HTMLElement, offset: number) => {
-  const sel = window.getSelection();
-  if (!sel) return;
-  let current = 0;
-  const range = document.createRange();
-
-  function walk(node: Node): boolean {
-    if (node.nodeType === 3) {
-      const len = node.textContent?.length ?? 0;
-      const next = current + len;
-      if (offset <= next) {
-        range.setStart(node, Math.min(offset - current, len));
-        range.collapse(true);
-        sel!.removeAllRanges();
-        sel!.addRange(range);
-        return true;
-      }
-      current = next;
-    } else if (isBr(node)) {
-      if (offset <= current) {
-        range.setStartBefore(node);
-        range.collapse(true);
-        sel!.removeAllRanges();
-        sel!.addRange(range);
-        return true;
-      }
-      if (offset <= current + 1) {
-        range.setStartAfter(node);
-        range.collapse(true);
-        sel!.removeAllRanges();
-        sel!.addRange(range);
-        return true;
-      }
-      current += 1;
-    }
-
-    for (const child of Array.from(node.childNodes)) {
-      if (walk(child)) return true;
-    }
-    return false;
-  }
-
-  walk(el);
-};
-
-const onInput = (ev: Event) => {
-  if (props.disabled || props.readonly || isComposing.value) return;
-
-  caret.value = getCaretOffset(ev.target as HTMLElement);
-  emit("input", ev);
-};
-
-const onCompositionStart = () => {
-  isComposing.value = true;
-};
-
-const onCompositionEnd = (ev: CompositionEvent) => {
-  const el = ev.target as HTMLElement;
-  isComposing.value = false;
-  nextTick(() => {
-    caret.value = getCaretOffset(el);
-    const inputEv = new InputEvent("input", { bubbles: true });
-    el.dispatchEvent(inputEv);
-    emit("input", inputEv);
-  });
-};
-
-const normalizeText = (s: string) => s.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
-
-const ensureEditableCanReceiveCaret = (el: HTMLElement) => {
-  // iOS Safari often refuses to show caret / accept input in an empty contenteditable.
-  if (!el.textContent?.length && el.childNodes.length === 0) {
-    el.appendChild(document.createElement("br"));
-  }
-};
-
-const syncContentFromModel = async () => {
-  const el = contentRef.value;
-  if (!el || props.type === "password") return;
-  if (isComposing.value) return;
-
-  const next = normalizeText(content.value.toString() ?? "");
-  const current = normalizeText(el.innerText);
-  if (current === next) return;
-
-  if (isFocus.value) {
-    const saved = caret.value;
-    el.innerText = next;
-    await nextTick();
-    el.focus();
-    setCaretOffset(el, Math.min(saved, next.length));
-  } else {
-    el.innerText = next;
-  }
-};
-
-const onFocus = (ev: FocusEvent) => {
-  if (props.disabled) return;
-  isFocus.value = true;
-  const el = contentRef.value;
-  if (el && props.type !== "password") {
-    ensureEditableCanReceiveCaret(el);
-  }
-  emit("focus", ev);
-};
-
-const onBlur = (ev: FocusEvent) => {
-  if (props.disabled) return;
-  isFocus.value = false;
-  emit("blur", ev);
-};
-
-const onBeforeinput = (ev: Event) => {
-  if (props.disabled || props.readonly) {
-    ev.preventDefault();
-    return;
-  }
-  emit("beforeinput", ev);
-};
-
-// Lifecycle
-// ----------------------------------------------------------------------------
-watch(
-  () => content.value,
-  () => void syncContentFromModel(),
-  { flush: "post" }
-);
-
-onMounted(() => void syncContentFromModel());
-</script>