@toife/vue 3.1.5 → 3.2.0

package/src/components/field/field.vue

@@ -1,86 +0,0 @@
-<template src="./field.html"></template>
-<script lang="ts" setup>
-import { computed, inject } from "vue";
-import type { FieldProps } from "./field.type";
-import type { FieldEmit } from "./field.type";
-import { OutlineField } from "./outline";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<FieldProps>(), {
-  modelValue: "",
-  type: "text",
-  size: "standard",
-  disabled: false,
-  readonly: false,
-  message: "",
-  help: "",
-  variant: "outline",
-  placeholder: "",
-  shadow: undefined,
-  direction: undefined,
-  line: 1,
-});
-const emit = defineEmits<FieldEmit>();
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const role = computed(() => {
-  return props.role || appState?.role.value || "";
-});
-
-const shape = computed(() => {
-  return props.shape || appState?.shape.value || "";
-});
-
-const shadow = computed(() => {
-  return (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
-});
-
-const direction = computed(() => {
-  return props.direction || appState?.direction?.value || "left";
-});
-
-const fieldAttrs = computed(() => {
-  return {
-    ...props,
-    direction: direction.value,
-    role: role.value,
-    shape: shape.value,
-    shadow: shadow.value,
-    onInput,
-    onFocus,
-    onBlur,
-    onBeforeinput,
-  };
-});
-
-// Methods
-// ----------------------------------------------------------------------------
-const onInput = (event: Event) => {
-  let raw = "";
-  // Outline variant uses contenteditable for non-password types; password uses a real input
-  if (props.type !== "password") {
-    raw = (event.target as HTMLElement).innerText;
-  } else {
-    raw = (event.target as HTMLInputElement).value;
-  }
-  const value = raw.trim() === "" ? "" : raw;
-  emit("update:modelValue", value as string);
-  emit("input", event);
-};
-
-const onFocus = (event: FocusEvent) => {
-  emit("focus", event);
-};
-
-const onBlur = (event: FocusEvent) => {
-  emit("blur", event);
-};
-
-const onBeforeinput = (event: Event) => {
-  emit("beforeinput", event);
-};
-</script>

package/src/components/field/index.ts

@@ -1,2 +0,0 @@
-export { default as Field } from "./field.vue";
-export type { FieldVariant, FieldSize, FieldProps, FieldEmit } from "./field.type";

package/src/components/field/outline/index.ts

@@ -1 +0,0 @@
-export { default as OutlineField } from "./outline.vue";

package/src/components/field/outline/outline.html

@@ -1,36 +0,0 @@
-<div v-bind="fieldAttrs">
-  <div v-bind="fieldContentAttrs">
-    <slot name="start-input"></slot>
-    <slot name="input">
-      <div v-bind="fieldInputShellAttrs" v-if="type !== 'password'">
-        <div
-          v-bind="fieldEditableAttrs"
-          @input="onInput"
-          @compositionstart="onCompositionStart"
-          @compositionend="onCompositionEnd"
-          @focus="onFocus"
-          @blur="onBlur"
-          @beforeinput="onBeforeinput"
-          ref="contentRef"
-        ></div>
-      </div>
-      <input
-        v-bind="fieldPasswordInputAttrs"
-        @input="onInput"
-        @compositionstart="onCompositionStart"
-        @compositionend="onCompositionEnd"
-        @focus="onFocus"
-        @blur="onBlur"
-        @beforeinput="onBeforeinput"
-        ref="contentRef"
-        :value="content"
-        type="password"
-        v-else
-      />
-    </slot>
-    <slot name="end-input"></slot>
-  </div>
-  <div v-bind="fieldMessageAttrs" v-if="message">{{ message }}</div>
-  <div v-bind="fieldHelpAttrs" v-if="help">{{ help }}</div>
-  <slot></slot>
-</div>

package/src/components/field/outline/outline.scss

@@ -1,282 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$field: sass.fn-naming-prefix("field");
-$field-content: sass.fn-naming-prefix("field-content");
-$field-input: sass.fn-naming-prefix("field-input");
-$field-input-editable: sass.fn-naming-prefix("field-input-editable");
-$field-message: sass.fn-naming-prefix("field-message");
-$field-help: sass.fn-naming-prefix("field-help");
-
-// Property name - layer: field
-$field-border-color: sass.fn-naming-var("field", "border-color");
-$field-background-color: sass.fn-naming-var("field", "background-color");
-$field-color: sass.fn-naming-var("field", "color");
-$field-placeholder-color: sass.fn-naming-var("field", "placeholder-color");
-$field-help-color: sass.fn-naming-var("field", "help-color");
-$field-line: sass.fn-naming-var("field", "line");
-$field-max-line: sass.fn-naming-var("field", "max-line");
-
-$radius-ratio: sass.fn-naming-var("radius-ratio");
-$radius-size: sass.fn-naming-var("radius-size");
-$border-width: sass.fn-naming-var("stroke", "width");
-
-$spacing-x: sass.fn-naming-var("spacing", "x");
-$spacing-y: sass.fn-naming-var("spacing", "y");
-
-$size-font-size: sass.fn-naming-var("font-size");
-$size-control-block-size: sass.fn-naming-var("control-block-size");
-$size-coefficient-x: sass.fn-naming-var("coefficient-x");
-$size-coefficient-y: sass.fn-naming-var("coefficient-y");
-$size-line-height: sass.fn-naming-var("line-height");
-
-$transition-duration: sass.fn-naming-var("motion", "duration");
-
-$direction-text-align: sass.fn-naming-var("text-align");
-$direction-justify-content: sass.fn-naming-var("justify-content");
-
-.#{$field} {
-  width: 100%;
-  box-shadow: none !important;
-
-  // Field
-  .#{$field-content} {
-    transition:
-      box-shadow #{$transition-duration} ease,
-      border-color #{$transition-duration} ease,
-      background-color #{$transition-duration} ease,
-      color #{$transition-duration} ease,
-      border-radius #{$transition-duration} ease;
-    border-color: rgba(#{$field-border-color});
-    border-radius: calc(min(#{$size-control-block-size}, #{$radius-size}) * #{$radius-ratio});
-    border-width: #{$border-width};
-    border-style: solid;
-    overflow: hidden;
-    line-height: 0;
-    height: fit-content;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  // Input shell wrapping contenteditable (flex layout); must not apply display:flex to <input>.
-  div.#{$field-input} {
-    padding: calc(#{$spacing-y} * #{$size-coefficient-y})
-      calc(#{$spacing-x} * #{$size-coefficient-x});
-    position: relative;
-    background-color: transparent;
-    z-index: 2;
-    min-height: calc(#{$field-line} * #{$size-control-block-size} - 2 * #{$border-width});
-    max-height: calc(#{$field-max-line} * #{$size-control-block-size} - 2 * #{$border-width});
-    box-sizing: border-box;
-    width: 100%;
-    flex: 1;
-    display: flex;
-    align-items: center;
-    transition:
-      box-shadow #{$transition-duration} ease,
-      border-color #{$transition-duration} ease,
-      background-color #{$transition-duration} ease,
-      color #{$transition-duration} ease,
-      border-radius #{$transition-duration} ease;
-
-    &:focus-within,
-    &:active,
-    &:hover {
-      outline: none;
-    }
-
-    &::placeholder {
-      color: rgba(#{$field-placeholder-color});
-    }
-  }
-
-  // Native password <input> (single node, not wrapped).
-  input.#{$field-input} {
-    padding: calc(#{$spacing-y} * #{$size-coefficient-y})
-      calc(#{$spacing-x} * #{$size-coefficient-x});
-    position: relative;
-    background-color: transparent;
-    z-index: 2;
-    min-height: calc(#{$field-line} * #{$size-control-block-size} - 2 * #{$border-width});
-    max-height: calc(#{$field-max-line} * #{$size-control-block-size} - 2 * #{$border-width});
-    box-sizing: border-box;
-    width: 100%;
-    flex: 1;
-    color: rgba(#{$field-color});
-    caret-color: rgba(#{$field-color});
-    border: none;
-    -webkit-user-select: text;
-    user-select: text;
-    font-size: #{$size-font-size};
-    line-height: #{$size-line-height};
-    overflow: auto;
-    transition:
-      box-shadow #{$transition-duration} ease,
-      border-color #{$transition-duration} ease,
-      background-color #{$transition-duration} ease,
-      color #{$transition-duration} ease,
-      border-radius #{$transition-duration} ease;
-
-    // Firefox
-    -moz-appearance: textfield;
-    appearance: textfield;
-
-    // Chrome, Edge, Safari
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    &:focus,
-    &:active,
-    &:hover {
-      outline: none;
-      border: none;
-    }
-
-    &::placeholder {
-      color: rgba(#{$field-placeholder-color});
-    }
-  }
-
-  .#{$field-input-editable} {
-    flex: 1 1 auto;
-    min-width: 0;
-    min-height: 0;
-    display: block;
-    position: relative;
-    z-index: 2;
-    background-color: transparent;
-    color: rgba(#{$field-color});
-    caret-color: rgba(#{$field-color});
-    border: none;
-    // user-select:all breaks caret placement on many mobile browsers for contenteditable.
-    -webkit-user-select: text;
-    user-select: text;
-    font-size: #{$size-font-size};
-    line-height: #{$size-line-height};
-    box-sizing: border-box;
-    width: 100%;
-    overflow: auto;
-    outline: none;
-
-    &:focus,
-    &:active {
-      outline: none;
-      border: none;
-    }
-  }
-
-  // Message
-  .#{$field-message} {
-    color: rgba(#{$field-background-color});
-    font-size: 0.9em;
-    line-height: 1.5;
-    transition:
-      box-shadow #{$transition-duration} ease,
-      border-color #{$transition-duration} ease,
-      background-color #{$transition-duration} ease,
-      color #{$transition-duration} ease,
-      border-radius #{$transition-duration} ease;
-  }
-
-  // Help
-  .#{$field-help} {
-    color: rgba(#{$field-help-color});
-    font-size: 0.8em;
-    line-height: 1.5;
-    transition:
-      box-shadow #{$transition-duration} ease,
-      border-color #{$transition-duration} ease,
-      background-color #{$transition-duration} ease,
-      color #{$transition-duration} ease,
-      border-radius #{$transition-duration} ease;
-  }
-
-  &.focus {
-    &.shadow {
-      .#{$field-content} {
-        box-shadow: 0 0 0 0.25rem rgba(#{$field-border-color}, 0.25);
-      }
-    }
-
-    &:not(.shadow) {
-      .#{$field-content} {
-        box-shadow: 0 0 0 calc(#{$border-width} * 1.5) rgba(#{$field-border-color});
-      }
-    }
-  }
-
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    div.#{$field-input},
-    input.#{$field-input},
-    .#{$field-input-editable} {
-      cursor: not-allowed;
-      -webkit-user-select: none;
-      user-select: none;
-    }
-  }
-
-  &.empty:not(.typing) {
-    div.#{$field-input} {
-      &::before {
-        content: attr(placeholder);
-        color: rgba(#{$field-placeholder-color});
-        transition: color #{$transition-duration} ease;
-        position: absolute;
-        height: calc(#{$size-control-block-size} - #{$border-width} * 2);
-        box-sizing: border-box;
-        top: 0;
-        pointer-events: none;
-        z-index: 0;
-        display: block;
-        white-space: pre-wrap;
-        word-break: break-word;
-        line-height: inherit;
-        font-size: inherit;
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-
-  // Type
-  &.paragraph {
-    div.#{$field-input} {
-      align-items: flex-start;
-    }
-
-    .#{$field-input-editable} {
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-  }
-
-  &.text {
-    .#{$field-input-editable},
-    input.#{$field-input} {
-      white-space: nowrap;
-    }
-  }
-
-  &.password {
-    input.#{$field-input} {
-      white-space: nowrap;
-    }
-  }
-
-  // Direction
-  div.#{$field-input} {
-    justify-content: #{$direction-justify-content};
-  }
-
-  .#{$field-input-editable},
-  input.#{$field-input} {
-    text-align: #{$direction-text-align};
-  }
-}

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>

package/src/components/form-group/form-group.html

@@ -1,3 +0,0 @@
-<div v-bind="formGroupAttrs">
-  <slot />
-</div>