@toife/vue 3.1.3 → 3.1.5

package/src/components/tabs/tabs/tabs.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, nextTick, onMounted, onUnmounted, provide, ref, watch } from "vue";
 import { type TabsProps, type TabsEmit, type TabsProviderState } from "./tabs.type";
-import { property, withPrefix } from "../../../utils";
+import { cssProperty, cssPrefix } from "../../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
 import { TABS_PROVIDER_STATE_KEY } from "./tabs.constants";
 
@@ -12,9 +12,9 @@ import { TABS_PROVIDER_STATE_KEY } from "./tabs.constants";
 const props = withDefaults(defineProps<TabsProps>(), {
   placement: "top-start",
   margin: () => [0, 0],
-  border: 2,
-  divider: undefined,
+  border: () => [2, 0],
   transition: true,
+  size: "standard",
 });
 const emit = defineEmits<TabsEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
@@ -26,6 +26,7 @@ const height = ref(0);
 const top = ref(0);
 const left = ref(0);
 const container = ref();
+const isFirstRender = ref(true);
 
 // Computed properties
 // ----------------------------------------------------------------------------
@@ -37,13 +38,15 @@ const shape = computed(() => {
   return props.shape || appState?.shape.value || "";
 });
 
+const size = computed(() => {
+  return props.size;
+});
+
 const activeValue = computed(() => {
   return props.modelValue || "";
 });
 
 const tabsAttrs = computed(() => {
-  const divider =
-    (props.divider !== undefined ? props.divider : appState?.divider.value || false) ?? false;
   let l = left.value;
   let t = top.value;
   let w = width.value;
@@ -57,7 +60,7 @@ const tabsAttrs = computed(() => {
   if (props.variant === "underline") {
     // Underline variant: align the highlight strip for top vs bottom tab bars
     if (props.placement.startsWith("top-")) {
-      t = h - props.border;
+      t = h - props.border[0];
     }
 
     if (props.placement.startsWith("bottom-")) {
@@ -65,12 +68,17 @@ const tabsAttrs = computed(() => {
     }
 
     if (props.placement.startsWith("top-") || props.placement.startsWith("bottom-")) {
-      h = props.border + 0.5;
+      h = props.border[0] + 0.5;
+
+      if (props.border[1]) {
+        l += (w - props.border[1]) / 2;
+        w = props.border[1];
+      }
     }
 
     // Left, Right
     if (props.placement.startsWith("left-")) {
-      l = w - props.border;
+      l = w - props.border[0];
     }
 
     if (props.placement.startsWith("right-")) {
@@ -78,30 +86,34 @@ const tabsAttrs = computed(() => {
     }
 
     if (props.placement.startsWith("left-") || props.placement.startsWith("right-")) {
-      w = props.border;
+      w = props.border[0];
+
+      if (props.border[1]) {
+        t += (h - props.border[1]) / 2;
+        h = props.border[1];
+      }
     }
   }
 
   return {
     class: [
-      withPrefix(["layer", "tabs"]),
-      withPrefix(["role", role.value]),
-      withPrefix(["shape", shape.value]),
-      withPrefix("tabs"),
+      cssPrefix(["layer", "tabs"]),
+      cssPrefix(["role", role.value]),
+      cssPrefix(["shape", shape.value]),
+      cssPrefix("tabs"),
       props.variant,
       props.placement,
       {
-        divider,
-        transition: props.transition,
+        transition: isFirstRender.value ? false : props.transition,
       },
     ],
     style: {
-      [property("highlight-top")]: typeof t === "string" ? t : t + "px",
-      [property("highlight-left")]: typeof l === "string" ? l : l + "px",
-      [property("highlight-width")]: typeof w === "string" ? w : w + "px",
-      [property("highlight-height")]: typeof h === "string" ? h : h + "px",
-      [property("highlight-space-x")]: (props.margin[1] > 0 ? props.margin[1] : 0) + "px",
-      [property("highlight-space-y")]: (props.margin[0] > 0 ? props.margin[0] : 0) + "px",
+      [cssProperty("tabs-highlight-top")]: typeof t === "string" ? t : t + "px",
+      [cssProperty("tabs-highlight-left")]: typeof l === "string" ? l : l + "px",
+      [cssProperty("tabs-highlight-width")]: typeof w === "string" ? w : w + "px",
+      [cssProperty("tabs-highlight-height")]: typeof h === "string" ? h : h + "px",
+      [cssProperty("tabs-highlight-space-x")]: (props.margin[1] > 0 ? props.margin[1] : 0) + "px",
+      [cssProperty("tabs-highlight-space-y")]: (props.margin[0] > 0 ? props.margin[0] : 0) + "px",
     },
   };
 });
@@ -124,20 +136,27 @@ const calcPosition = () => {
   }
 };
 
+const checkRender = async () => {
+  await nextTick();
+  calcPosition();
+};
+
 // Lifecycle
 // ----------------------------------------------------------------------------
 watch(
   () => props.modelValue,
-  async () => {
-    await nextTick();
-    calcPosition();
+  () => {
+    checkRender();
   }
 );
 
-onMounted(async () => {
-  await nextTick();
-  calcPosition();
+onMounted(() => {
+  checkRender();
   window.addEventListener("resize", calcPosition);
+
+  setTimeout(() => {
+    isFirstRender.value = false;
+  }, 500);
 });
 
 onUnmounted(() => {
@@ -150,6 +169,7 @@ provide<TabsProviderState>(TABS_PROVIDER_STATE_KEY, {
   activeValue,
   role,
   shape,
+  size,
   setValue: (val: unknown) => {
     emit("update:modelValue", val as string);
   },

package/src/components/toast/toast/toast.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 import { type ToastProps } from "../toast.type";
-import { withPrefix } from "../../../utils";
+import { cssPrefix } from "../../../utils";
 import { useToast } from "../toast.composable";
 import { ToastContent } from "../toast-content";
 
@@ -18,7 +18,7 @@ const toast = useToast();
 // ----------------------------------------------------------------------------
 const toastAttrs = computed(() => {
   return {
-    class: [withPrefix("toast"), props.placement],
+    class: [cssPrefix("toast"), props.placement],
   };
 });
 

package/src/components/toast/toast-content/toast-content.scss

@@ -10,7 +10,8 @@ $toast-border-color: sass.fn-naming-var("toast", "border-color");
 
 $space-x: sass.fn-naming-var("spacing", "x");
 $transition-duration: sass.fn-naming-var("motion", "duration");
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+$radius-size: sass.fn-naming-var("radius-size");
 $border-width: sass.fn-naming-var("stroke", "width");
 $max-height: sass.fn-naming-var("overlay", "max-height");
 
@@ -25,15 +26,15 @@ $max-height: sass.fn-naming-var("overlay", "max-height");
     border-radius #{$transition-duration} ease,
     opacity #{$transition-duration} ease;
 
-  background-color: rgb(#{$toast-background-color});
-  color: rgb(#{$toast-color});
-  border-color: rgb(#{$toast-border-color});
+  background-color: rgba(#{$toast-background-color});
+  color: rgba(#{$toast-color});
+  border-color: rgba(#{$toast-border-color});
   border-width: #{$border-width};
   border-style: solid;
   max-height: #{$max-height};
   max-width: 100%;
   padding: calc(#{$space-x} * 2) calc(#{$space-x} * 4);
-  border-radius: #{$border-radius};
+  border-radius: calc(min(#{$radius-size}, #{$max-height}) * #{$radius-ratio});
 
   &.closing {
     opacity: 0;

package/src/components/toast/toast-content/toast-content.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, onMounted, ref } from "vue";
 import { type ToastContentProps, type ToastContentEmit } from "../toast.type";
-import { withPrefix } from "../../../utils";
+import { cssPrefix } from "../../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
 
 // Component setup (props, emits, injects)
@@ -27,10 +27,10 @@ const contentAttrs = computed(() => {
   const shape = props.shape || appState?.shape.value || "";
   return {
     class: [
-      withPrefix(["layer", "toast"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape]),
-      withPrefix("toast-content"),
+      cssPrefix(["layer", "toast"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
+      cssPrefix("toast-content"),
       props.variant,
       {
         closing: isClosing.value,

package/src/components/toolbar/toolbar.scss

@@ -14,11 +14,11 @@ $safe-area-top: sass.fn-naming-var("safe-area", "top");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 $border-width: sass.fn-naming-var("stroke", "width");
-$border: #{$border-width} solid rgb(#{$toolbar-border-color});
+$border: #{$border-width} solid rgba(#{$toolbar-border-color});
 
 .#{$toolbar} {
-  background-color: rgb(#{$toolbar-background-color});
-  color: rgb(#{$toolbar-color});
+  background-color: rgba(#{$toolbar-background-color});
+  color: rgba(#{$toolbar-color});
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,
@@ -26,7 +26,7 @@ $border: #{$border-width} solid rgb(#{$toolbar-border-color});
     color #{$transition-duration} ease,
     border-radius #{$transition-duration} ease;
 
-  &.with-safe-area {
+  &.safe {
     &.right {
       padding-right: #{$safe-area-right};
     }

package/src/components/toolbar/toolbar.type.ts

@@ -1,7 +1,7 @@
 // Type definitions
 export type ToolbarProps = {
   placement?: string | null;
-  safeArea?: boolean;
+  safe?: boolean;
   role?: string;
   divider?: boolean;
 };

package/src/components/toolbar/toolbar.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject } from "vue";
 import { type ToolbarProps } from "./toolbar.type";
-import { property, withPrefix } from "../../utils";
+import { cssProperty, cssPrefix } from "../../utils";
 import { type CableProviderState } from "../cable/cable.type";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 import { CABLE_PROVIDER_STATE_KEY } from "../cable";
@@ -12,7 +12,7 @@ import { CABLE_PROVIDER_STATE_KEY } from "../cable";
 // ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<ToolbarProps>(), {
   placement: null,
-  safeArea: true,
+  safe: true,
   divider: undefined,
 });
 const cable = inject<CableProviderState>(CABLE_PROVIDER_STATE_KEY);
@@ -27,13 +27,13 @@ const toolbarAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "toolbar"]),
-      withPrefix(["role", role]),
-      withPrefix("toolbar"),
+      cssPrefix(["layer", "toolbar"]),
+      cssPrefix(["role", role]),
+      cssPrefix("toolbar"),
       placement,
       {
-        "with-safe-area": props.safeArea,
-        divider: divider.value,
+        safe: props.safe,
+        divider: divider,
       },
     ],
   };

package/src/factory.ts

@@ -16,10 +16,11 @@ import {
   Dropdown,
   Field,
   Flex,
+  FlexItem,
   FormGroup,
   GestureIndicator,
   Grid,
-  Cell,
+  GridItem,
   Image,
   Modal,
   Page,
@@ -33,6 +34,7 @@ import {
   RouteOutlet,
   SegmentedField,
   Select,
+  SlideRange,
   Skeleton,
   Switch,
   Tab,
@@ -41,54 +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 + "form-group", FormGroup);
-      app.component(prefix + "gesture-indicator", GestureIndicator);
-      app.component(prefix + "grid", Grid);
-      app.component(prefix + "cell", Cell);
-      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 + "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/index.ts

@@ -1,4 +1,4 @@
 /// <reference path="./env.d.ts" />
 export * from "./factory";
-export * as utils from "./utils";
+export * from "./utils";
 export * from "./components";

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