@toife/vue 2.2.0 → 3.0.0

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("item", "border-color");
+$role-color: sass.fn-naming-var("item", "background-color");
+$base-color: sass.fn-naming-var("base", "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(#{$base-color});
+    caret-color: rgb(#{$base-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(#{$base-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(#{$base-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(#{$base-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", "item"]),
+      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"), withPrefix(["layer", "surface"]), withPrefix(["role", "mode"])],
+}));
+
+/// 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.scss

@@ -0,0 +1,91 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Classes
+$form-group: sass.fn-naming-prefix("form-group");
+$button: sass.fn-naming-prefix("button");
+$field: sass.fn-naming-prefix("field");
+$field-content: sass.fn-naming-prefix("field-content");
+
+.#{$form-group} {
+  display: flex;
+
+  > :deep(*) {
+    flex: 1;
+
+    &.focus {
+      z-index: 2;
+    }
+  }
+
+  &.horizontal {
+    flex-direction: row;
+
+    :deep(.#{$button}) {
+      &:not(:last-child):not(:first-child) {
+        border-radius: 0;
+      }
+
+      &:first-child:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:last-child:not(:first-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    :deep(.#{$field}) {
+      &:not(:last-child):not(:first-child) .#{$field-content} {
+        border-radius: 0;
+      }
+
+      &:first-child:not(:last-child) .#{$field-content} {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:last-child:not(:first-child) .#{$field-content} {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+
+  &.vertical {
+    flex-direction: column;
+
+    :deep(.#{$button}) {
+      &:not(:last-child):not(:first-child) {
+        border-radius: 0;
+      }
+
+      &:first-child:not(:last-child) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:last-child:not(:first-child) {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+
+    :deep(.#{$field}) {
+      &:not(:last-child):not(:first-child) .#{$field-content} {
+        border-radius: 0;
+      }
+
+      &:first-child:not(:last-child) .#{$field-content} {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:last-child:not(:first-child) .#{$field-content} {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
+}

package/src/components/form-group/form-group.type.ts

@@ -0,0 +1,5 @@
+export type FormGroupOrientation = "horizontal" | "vertical";
+
+export type FormGroupProps = {
+  orientation?: FormGroupOrientation;
+};

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

@@ -0,0 +1,21 @@
+<style lang="scss" src="./form-group.scss" scoped></style>
+<template src="./form-group.html"></template>
+<script lang="ts" setup>
+import { withPrefix } from "@/utils";
+import { computed } from "vue";
+import { type FormGroupProps } from "./form-group.type";
+
+/// Defined
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<FormGroupProps>(), {
+  orientation: "horizontal",
+});
+
+/// Computed
+/// ------------------------------------------------------------
+const formGroupAttrs = computed(() => {
+  return {
+    class: [withPrefix("form-group"), props.orientation],
+  };
+});
+</script>

package/src/components/form-group/index.ts

@@ -0,0 +1,2 @@
+export { default as FormGroup } from "./form-group.vue";
+export * from "./form-group.type";

package/src/components/gesture-indicator/gesture-indicator.html

@@ -0,0 +1 @@
+<div v-bind="gestureIndicatorAttrs"></div>

package/src/components/gesture-indicator/gesture-indicator.scss

@@ -0,0 +1,45 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$gesture-indicator: sass.fn-naming-prefix("gesture-indicator");
+
+// Property name - layer: stroke
+$border-color: sass.fn-naming-var("stroke", "border-color");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$gesture-indicator} {
+  background-color: rgb(#{$border-color});
+  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;
+  position: absolute;
+  border-radius: 3px;
+  z-index: 99;
+
+  &.bottom {
+    width: 40px;
+    height: 4px;
+    top: 5px;
+  }
+
+  &.top {
+    width: 40px;
+    height: 4px;
+    bottom: 5px;
+  }
+
+  &.left {
+    height: 40px;
+    width: 4px;
+    right: 5px;
+  }
+
+  &.right {
+    height: 40px;
+    width: 4px;
+    left: 5px;
+  }
+}

package/{dist/components/gesture-indicator/gesture-indicator.type.d.ts → src/components/gesture-indicator/gesture-indicator.type.ts}

@@ -1,3 +1,4 @@
+// Define
 export type GestureIndicatorProps = {
-    placement?: string;
+  placement?: string;
 };

package/src/components/gesture-indicator/gesture-indicator.vue

@@ -0,0 +1,32 @@
+<style lang="scss" src="./gesture-indicator.scss" scoped></style>
+<template src="./gesture-indicator.html"></template>
+<script lang="ts" setup>
+import { withPrefix } from "../../utils";
+import { type GestureIndicatorProps } from "./gesture-indicator.type";
+import { computed, inject } from "vue";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+const props = withDefaults(defineProps<GestureIndicatorProps>(), {
+  placement: "bottom",
+});
+
+/// Computed
+/// ------------------------------------------------------------
+const role = computed(() => {
+  return appState?.role.value || "";
+});
+
+const gestureIndicatorAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix(["layer", "stroke"]),
+      withPrefix(["role", role.value]),
+      withPrefix("gesture-indicator"),
+      props.placement,
+    ],
+  };
+});
+</script>

package/src/components/gesture-indicator/index.ts

@@ -0,0 +1 @@
+export { default as GestureIndicator } from "./gesture-indicator.vue";

package/src/components/image/image.html

@@ -0,0 +1 @@
+<img @error="handleError" :src="dataSrc" />

package/src/components/image/image.scss

@@ -0,0 +1 @@
+// Add styles here if needed

package/src/components/image/image.type.ts

@@ -0,0 +1,5 @@
+// Define
+export type ImageProps = {
+  defaultSrc?: string;
+  src?: string;
+};