@toife/vue 3.0.2 → 3.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toife/vue",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "A Frontend framework for Vue",
   "type": "module",
   "sideEffects": false,

package/src/components/action/action.composable.ts

@@ -7,6 +7,7 @@ const visible = ref(false);
 export const useAction = () => {
   const open = (props: ActionComposableProps) => {
     data.value = props;
+    // Defer showing one frame so Present/transition hooks see a clean open cycle
     setTimeout(() => {
       visible.value = true;
     }, 50);

package/src/components/action/action.type.ts

@@ -3,7 +3,7 @@ import { PresentPlacement } from "../present";
 
 export type ActionPlacement = PresentPlacement;
 
-// Define
+// Type definitions
 export type ActionButton = {
   text?: string;
   role?: string;
@@ -13,6 +13,9 @@ export type ActionButton = {
   data?: unknown;
 };
 
+/**
+ * Action Props Type
+ */
 export type ActionProps = {
   visible?: boolean;
   dismiss?: string[];
@@ -24,11 +27,17 @@ export type ActionProps = {
   placement?: ActionPlacement;
 };
 
+/**
+ * Action Composable Props Type
+ */
 export type ActionComposableProps = ActionProps & {
   onClose?: (type?: string) => void;
   onChoose?: (btn?: ActionButton) => void;
 };
 
+/**
+ * Action Emit Type
+ */
 export type ActionEmit = {
   (e: "close", type?: string): void;
   (e: "choose", btn: ActionButton): void;

package/src/components/action/action.vue

@@ -9,10 +9,8 @@ import { type ActionEmit, type ActionButton, type ActionProps } from "./action.t
 import { withPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-const emit = defineEmits<ActionEmit>();
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<ActionProps>(), {
   visible: false,
   shape: undefined,
@@ -21,13 +19,16 @@ const props = withDefaults(defineProps<ActionProps>(), {
   divider: undefined,
   shadow: undefined,
 });
+const emit = defineEmits<ActionEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
+// Brief "pop" class toggle when backdrop is tapped but the sheet stays open (visual feedback)
 const pop = ref(false);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const actionAttrs = computed(() => {
   const divider = (props?.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
   const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
@@ -49,9 +50,10 @@ const actionAttrs = computed(() => {
   };
 });
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const onClose = (val: string) => {
+  // Named dismiss sources close the sheet; backdrop tap may only play feedback unless listed in dismiss
   if (props.dismiss && props.dismiss.includes(val)) {
     emit("close", val);
   } else if (val === "backdrop") {

package/src/components/app/app.type.ts

@@ -1,7 +1,13 @@
 import type { Ref } from "vue";
 
+/**
+ * App Direction Type
+ */
 export type AppDirection = "left" | "right";
 
+/**
+ * App Props Type
+ */
 export type AppProps = {
   shape?: string;
   divider?: boolean;
@@ -11,6 +17,9 @@ export type AppProps = {
   direction?: AppDirection;
 };
 
+/**
+ * App Provider State Type
+ */
 export type AppProviderState = {
   shape: Ref<string>;
   divider: Ref<boolean>;

package/src/components/app/app.vue

@@ -9,8 +9,8 @@ import { DecisionModal, useDecisionModal } from "../decision-modal";
 import { type AppProviderState, type AppProps } from "./app.type";
 import { APP_PROVIDER_STATE_KEY } from "./app.constants";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<AppProps>(), {
   shape: "pill",
   divider: false,
@@ -23,17 +23,18 @@ const { shape, divider, role, shadow, triple, direction } = toRefs(props);
 const decisionModal = useDecisionModal();
 const action = useAction();
 
-/// Computed
-/// ------------------------------------------------------------
-// Present attributes
+// Computed properties
+// ----------------------------------------------------------------------------
+// Root layout classes for the application shell (global theme layer)
 const appAttrs = computed(() => {
   return {
     class: [withPrefix(["layer", "app"]), withPrefix(["shape", shape.value]), withPrefix("app")],
   };
 });
 
-// Export, Expose
-/// ------------------------------------------------------------
+// Provide / expose (public API)
+// ----------------------------------------------------------------------------
+// Theme tokens for child components (shape, role, shadows, navigation direction)
 provide<AppProviderState>(APP_PROVIDER_STATE_KEY, {
   shape,
   divider,

package/src/components/avatar/avatar.type.ts

@@ -1,4 +1,4 @@
-// Define
+// Type definitions
 export type AvatarProps = {
   shape?: string;
   size?: string | number;

package/src/components/avatar/avatar.vue

@@ -6,16 +6,16 @@ import { type AvatarProps } from "./avatar.type";
 import { property, withPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<AvatarProps>(), {
   size: "22px",
   src: "",
 });
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const avatarAttrs = computed(() => {
   const shape = props?.shape || appState?.shape.value || "";
   const role = appState?.role.value || "";
@@ -33,13 +33,4 @@ const avatarAttrs = computed(() => {
     },
   };
 });
-
-/// Methods
-/// ------------------------------------------------------------
-
-// Lifecycle
-/// ------------------------------------------------------------
-
-// Export, Expose
-/// ------------------------------------------------------------
 </script>

package/src/components/button/button.type.ts

@@ -1,4 +1,4 @@
-// Define
+// Type definitions
 export type ButtonVariant = "fill" | "outline" | "text" | "link";
 
 export type ButtonSize = "small" | "standard" | "large";

package/src/components/button/button.vue

@@ -6,8 +6,8 @@ import { type ButtonProps } from "./button.type";
 import { withPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<ButtonProps>(), {
   size: "standard",
   block: false,
@@ -17,12 +17,12 @@ const props = withDefaults(defineProps<ButtonProps>(), {
 });
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const isFocused = ref(false);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const buttonAttrs = computed(() => {
   const shape = props.shape || appState?.shape.value || "";
   const role = props.role || appState?.role.value || "";
@@ -49,8 +49,8 @@ const loaderAttrs = {
   class: [withPrefix("loader")],
 } as const;
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const onFocus = () => {
   isFocused.value = true;
 };

package/src/components/cable/cable.type.ts

@@ -1,6 +1,6 @@
 import type { Ref } from "vue";
 
-// Define
+// Type definitions
 export type CableProps = {
   keyboard?: boolean;
   placement?: string;

package/src/components/cable/cable.vue

@@ -6,27 +6,27 @@ import { type CableProviderState, type CableProps } from "./cable.type";
 import { withPrefix } from "../../utils";
 import { CABLE_PROVIDER_STATE_KEY } from "./cable.constants";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<CableProps>(), {
   keyboard: false,
   placement: "bottom",
 });
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const { placement } = toRefs(props);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const cableAttrs = computed(() => {
   return {
     class: [withPrefix(["layer", "cable"]), withPrefix("cable"), placement.value],
   };
 });
 
-// Export, Expose
-/// ------------------------------------------------------------
+// Provide / expose (public API)
+// ----------------------------------------------------------------------------
 provide<CableProviderState>(CABLE_PROVIDER_STATE_KEY, {
   placement,
 });

package/src/components/card/card/card.type.ts

@@ -1,6 +1,6 @@
 import { ComputedRef, Ref } from "vue";
 
-// Define
+// Type definitions
 export type CardProps = {
   role?: string;
   shape?: string;

package/src/components/card/card/card.vue

@@ -7,8 +7,8 @@ import { withPrefix } from "../../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
 import { CARD_PROVIDER_STATE_KEY } from "./card.constants";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<CardProps>(), {
   divider: undefined,
   shape: undefined,
@@ -16,8 +16,8 @@ const props = withDefaults(defineProps<CardProps>(), {
 });
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const divider = computed(() => {
   return (props?.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
 });
@@ -52,8 +52,8 @@ const cardProviderState = computed(() => {
   };
 });
 
-/// Export, Expose
-/// ------------------------------------------------------------
+// Provide / expose (public API)
+// ----------------------------------------------------------------------------
 provide<CardProviderState>(CARD_PROVIDER_STATE_KEY, {
   role,
   shape,

package/src/components/card/card-footer/card-footer.vue

@@ -5,12 +5,12 @@ import { computed, inject } from "vue";
 import { withPrefix } from "../../../utils";
 import { type CardProviderState, CARD_PROVIDER_STATE_KEY } from "../card";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const cardProviderState = inject<CardProviderState>(CARD_PROVIDER_STATE_KEY);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const cardFooterAttrs = computed(() => {
   const divider = cardProviderState?.divider.value ?? false;
   return {

package/src/components/card/card-header/card-header.vue

@@ -5,12 +5,12 @@ import { computed, inject } from "vue";
 import { withPrefix } from "../../../utils";
 import { type CardProviderState, CARD_PROVIDER_STATE_KEY } from "../card";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const cardProviderState = inject<CardProviderState>(CARD_PROVIDER_STATE_KEY);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const cardHeaderAttrs = computed(() => {
   const divider = cardProviderState?.divider.value ?? false;
   return {

package/src/components/checkbox/checkbox.vue

@@ -6,8 +6,8 @@ import type { CheckboxProps, CheckboxEmit } from "./checkbox.type";
 import { withPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<CheckboxProps>(), {
   modelValue: false,
   disabled: false,
@@ -18,12 +18,12 @@ const props = withDefaults(defineProps<CheckboxProps>(), {
 const emit = defineEmits<CheckboxEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const isFocused = ref(false);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const checkboxAttrs = computed(() => {
   const baseRole = appState?.role.value || "";
   const role = props.role || baseRole;
@@ -51,8 +51,8 @@ const checkboxIconAttrs = {
   class: [withPrefix("checkbox-icon")],
 } as const;
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const onCheckbox = () => {
   if (props.disabled || props.readonly) return;
   emit("update:modelValue", !props.modelValue);

package/src/components/collapse/collapse.type.ts

@@ -1,4 +1,4 @@
-// Define
+// Type definitions
 export type CollapseProps = {
   modelValue?: boolean;
   duration?: number;

package/src/components/collapse/collapse.vue

@@ -6,8 +6,8 @@ import type { CollapseEmit, CollapseProps } from "./collapse.type";
 import { withPrefix, property } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<CollapseProps>(), {
   modelValue: false,
   duration: undefined,
@@ -17,14 +17,14 @@ const props = withDefaults(defineProps<CollapseProps>(), {
 const emit = defineEmits<CollapseEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const contentRef = ref<HTMLElement | null>(null);
 const contentHeight = ref(0);
 const isOpen = ref(false);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const role = computed(() => {
   return props.role ?? appState?.role.value ?? "";
 });
@@ -67,8 +67,8 @@ const contentAttrs = computed(() => {
 
 const contentInnerClass = computed(() => withPrefix("collapse-content-inner"));
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const measureContent = () => {
   if (contentRef.value) {
     contentHeight.value = contentRef.value.scrollHeight;
@@ -85,15 +85,8 @@ const onTransitionEnd = () => {
   // Optional: hook for transition end (e.g. a11y)
 };
 
-/// Lifecycle
-/// ------------------------------------------------------------
-onMounted(async () => {
-  if (isOpen.value) {
-    await nextTick();
-    measureContent();
-  }
-});
-
+// Lifecycle
+// ----------------------------------------------------------------------------
 watch(
   () => props.modelValue,
   async (open) => {
@@ -125,7 +118,10 @@ watch(
   }
 );
 
-onMounted(() => {
-  isOpen.value = Boolean(props.modelValue);
+onMounted(async () => {
+  await nextTick();
+  if (isOpen.value) {
+    measureContent();
+  }
 });
 </script>

package/src/components/container/container.vue

@@ -3,6 +3,7 @@
 <script lang="ts" setup>
 import { withPrefix } from "../../utils";
 
+// Static layout wrapper classes
 const containerAttrs = {
   class: [withPrefix("container")],
 } as const;

package/src/components/decision-modal/decision-modal.composable.ts

@@ -7,6 +7,7 @@ const visible = ref(false);
 export const useDecisionModal = () => {
   const open = (props: DecisionModalComposableProps) => {
     data.value = props;
+    // Defer visibility so the modal mounts with props before entering the open transition
     setTimeout(() => {
       visible.value = true;
     }, 50);

package/src/components/decision-modal/decision-modal.type.ts

@@ -1,6 +1,6 @@
 import { ButtonVariant } from "../button/button.type";
 
-// Define
+// Type definitions
 export type DecisionModalButton = {
   text?: string;
   role?: string;

package/src/components/decision-modal/decision-modal.vue

@@ -12,10 +12,8 @@ import {
 import { withPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-const emit = defineEmits<DecisionModalEmit>();
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<DecisionModalProps>(), {
   placement: "center",
   keepalive: false,
@@ -25,13 +23,15 @@ const props = withDefaults(defineProps<DecisionModalProps>(), {
   divider: undefined,
   flow: "row",
 });
+const emit = defineEmits<DecisionModalEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// State
-/// ------------------------------------------------------------
+// Reactive state
+// ----------------------------------------------------------------------------
 const pop = ref(false);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const shape = computed(() => {
   return props.shape || appState?.shape.value || "";
 });
@@ -77,8 +77,8 @@ const decisionModalFooterAttrs = computed(() => {
   };
 });
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const onClose = (val: string) => {
   if (props.dismiss && props.dismiss.includes(val)) {
     emit("close", val);
@@ -92,7 +92,7 @@ const onClose = (val: string) => {
 
 const onChoose = (btn: DecisionModalButton) => {
   emit("close");
-  btn.handler && btn.handler();
+  btn.handler?.();
   emit("choose", btn);
 };
 </script>

package/src/components/divider/divider.vue

@@ -6,15 +6,15 @@ import { type DividerProps } from "./divider.type";
 import { computed, inject } from "vue";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<DividerProps>(), {
   orientation: "horizontal",
 });
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const dividerAttrs = computed(() => {
   const role = props.role || appState?.role.value || "";
   return {

package/src/components/field/field.type.ts

@@ -4,7 +4,7 @@ export type FieldVariant = "outline" | "fill" | "underline";
 export type FieldSize = "small" | "standard" | "large";
 export type FieldType = "text" | "number" | "email" | "password" | "tel" | "url" | "paragraph";
 
-// Define
+// Type definitions
 export type FieldProps = {
   // Wrapper
   modelValue?: string;

package/src/components/field/field.vue

@@ -6,8 +6,8 @@ import type { FieldEmit } from "./field.type";
 import { OutlineField } from "./outline";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
-/// Define
-/// ------------------------------------------------------------
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<FieldProps>(), {
   modelValue: "",
   type: "text",
@@ -25,8 +25,8 @@ const props = withDefaults(defineProps<FieldProps>(), {
 const emit = defineEmits<FieldEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
-/// Computed
-/// ------------------------------------------------------------
+// Computed properties
+// ----------------------------------------------------------------------------
 const role = computed(() => {
   return props.role || appState?.role.value || "";
 });
@@ -57,10 +57,11 @@ const fieldAttrs = computed(() => {
   };
 });
 
-/// Methods
-/// ------------------------------------------------------------
+// Methods
+// ----------------------------------------------------------------------------
 const onInput = (event: Event) => {
   let raw = "";
+  // Outline variant uses contenteditable for non-password types; password uses a real input
   if (props.type !== "password") {
     raw = (event.target as HTMLElement).innerText;
   } else {