@toife/vue 3.1.4 → 3.1.6

package/src/factory.ts

@@ -43,56 +43,110 @@ import {
   ToastContent,
   Toolbar,
 } from "./components";
-import { type CreateToifeOptions } from "./type";
-import type { App as VueApp } from "vue";
+import { type SubscribeOptions } from "./type";
+import { DefineComponent, ref, type App as VueApp } from "vue";
 
-export const createToife = (options?: CreateToifeOptions) => {
-  return {
-    install: (app: VueApp) => {
-      const prefix = options?.prefix || "t-";
-      app.component(prefix + "app", App);
-      app.component(prefix + "action", Action);
-      app.component(prefix + "avatar", Avatar);
-      app.component(prefix + "button", Button);
-      app.component(prefix + "cable", Cable);
-      app.component(prefix + "card", Card);
-      app.component(prefix + "card-body", CardBody);
-      app.component(prefix + "card-header", CardHeader);
-      app.component(prefix + "card-footer", CardFooter);
-      app.component(prefix + "checkbox", Checkbox);
-      app.component(prefix + "radio", Radio);
-      app.component(prefix + "radio-group", RadioGroup);
-      app.component(prefix + "collapse", Collapse);
-      app.component(prefix + "container", Container);
-      app.component(prefix + "decision-modal", DecisionModal);
-      app.component(prefix + "divider", Divider);
-      app.component(prefix + "dropdown", Dropdown);
-      app.component(prefix + "field", Field);
-      app.component(prefix + "flex", Flex);
-      app.component(prefix + "flex-item", FlexItem);
-      app.component(prefix + "form-group", FormGroup);
-      app.component(prefix + "gesture-indicator", GestureIndicator);
-      app.component(prefix + "grid", Grid);
-      app.component(prefix + "grid-item", GridItem);
-      app.component(prefix + "image", Image);
-      app.component(prefix + "modal", Modal);
-      app.component(prefix + "page", Page);
-      app.component(prefix + "present", Present);
-      app.component(prefix + "refresher", Refresher);
-      app.component(prefix + "route-navigator", RouteNavigator);
-      app.component(prefix + "route-wrapper", RouteWrapper);
-      app.component(prefix + "route-provider", RouteProvider);
-      app.component(prefix + "route-outlet", RouteOutlet);
-      app.component(prefix + "segmented-field", SegmentedField);
-      app.component(prefix + "select", Select);
-      app.component(prefix + "slide-range", SlideRange);
-      app.component(prefix + "skeleton", Skeleton);
-      app.component(prefix + "switch", Switch);
-      app.component(prefix + "tab", Tab);
-      app.component(prefix + "tabs", Tabs);
-      app.component(prefix + "toast", Toast);
-      app.component(prefix + "toast-content", ToastContent);
-      app.component(prefix + "toolbar", Toolbar);
-    },
-  };
+const apps = ref<Record<string, any>>({});
+const defaultAppName = "toife";
+
+class Toife {
+  /**
+   * Subscribe options
+   */
+  public options: SubscribeOptions;
+  public app: VueApp;
+
+  /**
+   * Constructor
+   */
+  constructor(app: VueApp, options?: SubscribeOptions) {
+    this.options = options || {
+      name: defaultAppName,
+      prefix: "t-",
+    };
+
+    this.app = app;
+  }
+
+  /**
+   * Subscribe components
+   */
+  subscribeComponents() {
+    const prefix = this.options.prefix;
+    this.app.component(prefix + "app", App);
+    this.app.component(prefix + "action", Action);
+    this.app.component(prefix + "avatar", Avatar);
+    this.app.component(prefix + "button", Button);
+    this.app.component(prefix + "cable", Cable);
+    this.app.component(prefix + "card", Card);
+    this.app.component(prefix + "card-body", CardBody);
+    this.app.component(prefix + "card-header", CardHeader);
+    this.app.component(prefix + "card-footer", CardFooter);
+    this.app.component(prefix + "checkbox", Checkbox);
+    this.app.component(prefix + "radio", Radio);
+    this.app.component(prefix + "radio-group", RadioGroup);
+    this.app.component(prefix + "collapse", Collapse);
+    this.app.component(prefix + "container", Container);
+    this.app.component(prefix + "decision-modal", DecisionModal);
+    this.app.component(prefix + "divider", Divider);
+    this.app.component(prefix + "dropdown", Dropdown);
+    this.app.component(prefix + "field", Field);
+    this.app.component(prefix + "flex", Flex);
+    this.app.component(prefix + "flex-item", FlexItem);
+    this.app.component(prefix + "form-group", FormGroup);
+    this.app.component(prefix + "gesture-indicator", GestureIndicator);
+    this.app.component(prefix + "grid", Grid);
+    this.app.component(prefix + "grid-item", GridItem);
+    this.app.component(prefix + "image", Image);
+    this.app.component(prefix + "modal", Modal);
+    this.app.component(prefix + "page", Page);
+    this.app.component(prefix + "present", Present);
+    this.app.component(prefix + "refresher", Refresher);
+    this.app.component(prefix + "route-navigator", RouteNavigator);
+    this.app.component(prefix + "route-wrapper", RouteWrapper);
+    this.app.component(prefix + "route-provider", RouteProvider);
+    this.app.component(prefix + "route-outlet", RouteOutlet);
+    this.app.component(prefix + "segmented-field", SegmentedField);
+    this.app.component(prefix + "select", Select);
+    this.app.component(prefix + "slide-range", SlideRange);
+    this.app.component(prefix + "skeleton", Skeleton);
+    this.app.component(prefix + "switch", Switch);
+    this.app.component(prefix + "tab", Tab);
+    this.app.component(prefix + "tabs", Tabs);
+    this.app.component(prefix + "toast", Toast);
+    this.app.component(prefix + "toast-content", ToastContent);
+    this.app.component(prefix + "toolbar", Toolbar);
+  }
+
+  /**
+   * Subscribe a component
+   */
+  subscribe(name: string, component: DefineComponent<{}, {}, any>) {
+    if (!this.app.component(this.options.prefix + name)) {
+      this.app.component(this.options.prefix + name, component);
+    }
+  }
+}
+
+/**
+ * Subscribe components
+ */
+export const createToife = (app: VueApp, options?: SubscribeOptions) => {
+  const instance = new Toife(app, options);
+  apps.value[instance.options.name] = instance;
+  return instance;
+};
+
+/**
+ * Get component name
+ */
+export const useApp = (name: string = defaultAppName) => {
+  return apps.value[name] || null;
+};
+
+/**
+ * Get all apps
+ */
+export const getApps = () => {
+  return apps.value;
 };

package/src/type.ts

@@ -1,3 +1,4 @@
-export type CreateToifeOptions = {
+export type SubscribeOptions = {
   prefix?: string;
+  name: string;
 };

package/src/utils/style/index.ts

@@ -4,7 +4,7 @@ let separator: string | null = null;
 /**
  * Get the separator from the document element
  */
-export const getSeparator = () => {
+export const getCssSeparator = () => {
   if (!separator)
     separator = getComputedStyle(document.documentElement).getPropertyValue("--separator").trim();
 
@@ -14,7 +14,7 @@ export const getSeparator = () => {
 /**
  * Get the prefix from the document element
  */
-export const getPrefix = () => {
+export const getCssPrefix = () => {
   if (!prefix)
     prefix = getComputedStyle(document.documentElement).getPropertyValue("--prefix").trim();
 
@@ -24,9 +24,9 @@ export const getPrefix = () => {
 /**
  * Generate the prefixed name
  */
-export const withPrefix = (name: string | string[]) => {
-  const p = getPrefix();
-  const s = getSeparator();
+export const cssPrefix = (name: string | string[]) => {
+  const p = getCssPrefix();
+  const s = getCssSeparator();
   let names = [];
 
   if (typeof name === "string") {
@@ -45,13 +45,13 @@ export const withPrefix = (name: string | string[]) => {
 /**
  * Generate the property name
  */
-export const property = (name: string | string[]) => {
-  return `--${withPrefix(name)}`;
+export const cssProperty = (name: string | string[]) => {
+  return `--${cssPrefix(name)}`;
 };
 
 /**
  * Generate the name with var() syntax
  */
-export const variable = (name: string | string[]) => {
-  return `var(${property(name)})`;
+export const cssVariable = (name: string | string[]) => {
+  return `var(${cssProperty(name)})`;
 };

package/src/utils/style.md

@@ -1,6 +1,6 @@
 # Utils: `style`
 
-> Import: `import { utils } from "@toife/vue"` then `utils.withPrefix`, … (or import from `src/utils` in the monorepo).
+> Import: `import { utils } from "@toife/vue"` then `utils.cssPrefix`, … (or import from `src/utils` in the monorepo).
 
 **Source:** `src/utils/style/index.ts`
 
@@ -10,21 +10,21 @@ Reads `--prefix` and `--separator` from `document.documentElement` (cached), the
 
 ## API
 
-### `getPrefix(): string`
+### `getCssPrefix(): string`
 
 Trimmed `--prefix` on `:root` (singleton cache).
 
-### `getSeparator(): string`
+### `getCssSeparator(): string`
 
 Trimmed `--separator` (often `-` or `_`) used to join name parts.
 
-### `withPrefix(name: string | string[]): string`
+### `cssPrefix(name: string | string[]): string`
 
 If prefix exists: `[prefix, ...parts].join(separator)`. `name` can be a string or parts array (e.g. `['layer','surface']`).
 
-### `property(name: string | string[]): string`
+### `cssProperty(name: string | string[]): string`
 
-Returns the CSS custom property name **without** `var()`: `"--" + withPrefix(name)`.
+Returns the CSS custom property name **without** `var()`: `"--" + cssPrefix(name)`.
 
 ### `variable(name: string | string[]): string`
 
@@ -35,8 +35,8 @@ Returns `var(--<prefixed…>)`.
 ```ts
 import { utils } from "@toife/vue";
 
-utils.withPrefix("button");
-utils.property(["field", "line"]);
+utils.cssPrefix("button");
+utils.cssProperty(["field", "line"]);
 utils.variable(["field", "line"]);
 ```
 
@@ -46,4 +46,4 @@ Requires `document` and `getComputedStyle` — client-only after `:root` defines
 
 ## See also
 
-- Components using `withPrefix` for BEM classes
+- Components using `cssPrefix` for BEM classes

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.vue

@@ -1,286 +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 { property, withPrefix } 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(() => {
-  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,
-        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")],
-}));
-
-/** Outer shell: layout, placeholder pseudo-element (must stay off the contenteditable node on iOS). */
-const fieldInputShellAttrs = computed(() => ({
-  class: [withPrefix("field-input")],
-  placeholder: props.placeholder,
-}));
-
-/** contenteditable as the literal string "true"|"false" improves mobile WebKit behavior vs boolean. */
-const fieldEditableAttrs = computed(() => ({
-  class: [withPrefix("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: [withPrefix("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: [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 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 ?? "");
-  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>