@toife/vue 2.2.0 → 3.0.1

package/src/components/field/field.vue

@@ -0,0 +1,85 @@
+<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";
+
+/// Define
+/// ------------------------------------------------------------
+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
+/// ------------------------------------------------------------
+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 = "";
+  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

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

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

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

package/src/components/field/outline/outline-field.md

@@ -0,0 +1,44 @@
+# `OutlineField`
+
+> **Not** registered by `createToife()` — named import: `import { OutlineField } from "@toife/vue"` or register manually: `app.component("t-outline-field", OutlineField)`.
+
+## Description
+
+Outline field implementation (contenteditable or password `<input>`), used internally by `t-field` when `variant === 'outline'`. Import directly if you need it without the `Field` wrapper.
+
+## Requirements / dependencies
+
+| Item  | Notes                                               |
+| ----- | --------------------------------------------------- |
+| Vue   | ^3.5                                                |
+| Other | Same `FieldProps` / `FieldEmit` as `field.type.ts`. |
+
+## Basic usage
+
+```vue
+<script setup lang="ts">
+import { OutlineField } from "@toife/vue";
+</script>
+<template>
+  <OutlineField v-model="x" variant="outline" type="text" />
+</template>
+```
+
+## Props / events
+
+Same as `FieldProps` / `FieldEmit` — see [field.md](../field.md) and `field.type.ts`.
+
+## Slots
+
+| Slot      | Description                                             |
+| --------- | ------------------------------------------------------- |
+| `default` | Extra content after help (see `outline.html` template). |
+
+## Behavior notes
+
+- When `type !== 'password'`: contenteditable region with `v-text` and caret handling.
+- When `password`: native `<input type="password">`.
+
+## See also
+
+- Source: `src/components/field/outline`

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

@@ -0,0 +1,32 @@
+<div v-bind="fieldAttrs">
+  <div v-bind="fieldContentAttrs">
+    <div
+      v-bind="fieldInputAttrs"
+      @input="onInput"
+      @compositionstart="onCompositionStart"
+      @compositionend="onCompositionEnd"
+      @focus="onFocus"
+      @blur="onBlur"
+      @beforeinput="onBeforeinput"
+      ref="contentRef"
+      v-text="content"
+      v-if="type !== 'password'"
+    ></div>
+    <input
+      v-bind="fieldInputAttrs"
+      @input="onInput"
+      @compositionstart="onCompositionStart"
+      @compositionend="onCompositionEnd"
+      @focus="onFocus"
+      @blur="onBlur"
+      @beforeinput="onBeforeinput"
+      ref="contentRef"
+      :value="content"
+      type="password"
+      v-else
+    ></input>
+  </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

@@ -0,0 +1,224 @@
+@use "@toife/sass-layer-generator" 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-message: sass.fn-naming-prefix("field-message");
+$field-help: sass.fn-naming-prefix("field-help");
+$field-direction-left: sass.fn-naming-prefix("direction", "left");
+$field-direction-right: sass.fn-naming-prefix("direction", "right");
+
+// Property name
+$border-radius: sass.fn-naming-var("border-radius");
+$border-width: sass.fn-naming-var("stroke", "width");
+$border-color: sass.fn-naming-var("field", "border-color");
+$role-color: sass.fn-naming-var("field", "background-color");
+$app-color: sass.fn-naming-var("app", "color");
+$line: sass.fn-naming-var("field", "line");
+$max-line: sass.fn-naming-var("field", "max-line");
+
+$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-height: sass.fn-naming-var("height");
+$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");
+
+.#{$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: rgb(#{$border-color});
+    border-radius: #{$border-radius};
+    border-width: #{$border-width};
+    border-style: solid;
+    overflow: hidden;
+    line-height: 0;
+    height: fit-content;
+    position: relative;
+  }
+
+  // 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(#{$line} * #{$size-height} - 2 * #{$border-width});
+    max-height: calc(#{$max-line} * #{$size-height} - 2 * #{$border-width});
+    color: rgb(#{$app-color});
+    caret-color: rgb(#{$app-color});
+    border: none;
+    user-select: all;
+    font-size: #{$size-font-size};
+    line-height: #{$size-line-height};
+    box-sizing: border-box;
+    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,
+    &:active,
+    &:hover {
+      outline: none;
+      border: none;
+    }
+
+    // Firefox
+    -moz-appearance: textfield;
+    appearance: textfield;
+
+    // Chrome, Edge, Safari
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    &::placeholder {
+      color: rgba(#{$app-color}, 0.5);
+    }
+  }
+
+  // Message
+  .#{$field-message} {
+    color: rgb(#{$role-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: rgb(#{$app-color}, 0.75);
+    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;
+  }
+
+  // State
+  &.active {
+    .#{$field-content} {
+      border-color: rgb(#{$border-color});
+      box-shadow: 0 0 0 calc(#{$border-width} * 1.5) rgb(#{$border-color});
+    }
+  }
+
+  &.focus {
+    &.shadow {
+      .#{$field-content} {
+        box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+      }
+    }
+  }
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    .#{$field-input} {
+      cursor: not-allowed;
+      user-select: none;
+    }
+  }
+
+  &.empty:not(.typing) {
+    .#{$field-input} {
+      &::before {
+        content: attr(placeholder);
+        color: rgba(#{$app-color}, 0.5);
+        transition: color #{$transition-duration} ease;
+        position: absolute;
+        height: calc(#{$size-height} - #{$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;
+        padding: inherit;
+        line-height: inherit;
+        font-size: inherit;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  // Type
+  &.paragraph {
+    .#{$field-input} {
+      white-space: pre-wrap;
+      word-break: break-word;
+      display: flex;
+      align-items: start;
+      overflow: auto;
+    }
+  }
+
+  &.text {
+    .#{$field-input} {
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &.password {
+    .#{$field-input} {
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  // Direction
+  &.#{$field-direction-left} {
+    .#{$field-input} {
+      justify-content: start;
+      text-align: left;
+    }
+
+    .#{$field-input}::before {
+      left: 0;
+    }
+  }
+
+  &.#{$field-direction-right} {
+    .#{$field-input} {
+      justify-content: end;
+      text-align: right;
+    }
+
+    .#{$field-input}::before {
+      right: 0;
+    }
+  }
+}

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

@@ -0,0 +1,243 @@
+<style lang="scss" src="./outline.scss" scoped></style>
+<template src="./outline.html"></template>
+<script lang="ts" setup>
+import { computed, nextTick, ref, watch } from "vue";
+import type { FieldProps, FieldEmit } from "../field.type";
+import { property, withPrefix } from "../../../utils";
+
+/// Define
+/// ------------------------------------------------------------
+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>();
+
+/// State
+/// ------------------------------------------------------------
+const isFocus = ref(false);
+const contentRef = ref<HTMLElement>();
+const caret = ref(0);
+const isComposing = ref(false);
+
+/// Computed
+/// ------------------------------------------------------------
+const content = computed(() => {
+  return props.value || props.modelValue;
+});
+
+const fieldAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix(["layer", "field"]),
+      withPrefix(["role", props.role || ""]),
+      withPrefix(["shape", props.shape || ""]),
+      withPrefix("field"),
+      withPrefix(["size", props.size]),
+      withPrefix(["direction", props.direction || "left"]),
+      props.variant,
+      props.type,
+      {
+        disabled: props.disabled,
+        active: isFocus.value || props.message,
+        focus: isFocus.value,
+        shadow: props.shadow,
+        empty: !content.value,
+        readonly: props.readonly,
+        typing: isComposing.value,
+      },
+    ],
+    style: {
+      [property(["field", "line"])]: props.line,
+      [property(["field", "max-line"])]: props.maxLine || props.line,
+    },
+  };
+});
+
+const fieldContentAttrs = computed(() => ({
+  class: [withPrefix("field-content")],
+}));
+
+const fieldInputAttrs = computed(() => ({
+  class: [withPrefix("field-input")],
+  name: props.name,
+  id: props.id,
+  placeholder: props.placeholder,
+  contenteditable: props.type !== "password" ? !props.disabled && !props.readonly : undefined,
+  autocomplete: props.autocomplete,
+  tabindex: props.disabled ? -1 : props.tabindex,
+  readonly: props.type === "password" ? props.readonly : undefined,
+  disabled: props.type === "password" ? props.disabled : undefined,
+}));
+
+const fieldMessageAttrs = computed(() => ({
+  class: [withPrefix("field-message")],
+}));
+
+const fieldHelpAttrs = computed(() => ({
+  class: [withPrefix("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 onFocus = (ev: FocusEvent) => {
+  if (props.disabled) return;
+  isFocus.value = true;
+  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,
+  async (val) => {
+    if (!isFocus.value || isComposing.value) return;
+    const el = contentRef.value;
+    if (!el) return;
+    await nextTick();
+    el.focus();
+    setCaretOffset(el, caret.value);
+  },
+  { immediate: true }
+);
+</script>

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

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

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

@@ -0,0 +1,41 @@
+# `<t-form-group>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Groups controls in a horizontal or vertical flex layout; used by `Action` to stack button rows.
+
+## Requirements / dependencies
+
+| Item  | Notes |
+| ----- | ----- |
+| Vue   | ^3.5  |
+| Other | None. |
+
+## Basic usage
+
+```vue
+<t-form-group orientation="vertical">
+  <t-button>A</t-button>
+  <t-button>B</t-button>
+</t-form-group>
+```
+
+## Props
+
+| Prop          | Type                         | Default        | Description  |
+| ------------- | ---------------------------- | -------------- | ------------ |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout axis. |
+
+**Type source:** `src/components/form-group/form-group.type.ts`
+
+## Slots
+
+| Slot      | Description     |
+| --------- | --------------- |
+| `default` | Child controls. |
+
+## See also
+
+- Source: `src/components/form-group`