@toife/vue 3.1.4 → 3.1.5

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