@toife/vue 3.0.3 → 3.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toife/vue",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "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.scss

@@ -4,7 +4,9 @@
 $action: sass.fn-naming-prefix("action");
 $button: sass.fn-naming-prefix("button");
 
-// Property name
+// Property name - layer: action
+$action-border-color: sass.fn-naming-var("action", "border-color");
+
 $margin-y: sass.fn-naming-var("spacing", "y");
 $margin-x: sass.fn-naming-var("spacing", "x");
 $width: sass.fn-naming-var("viewport", "width");
@@ -17,7 +19,6 @@ $safe-area-top: sass.fn-naming-var("safe-area", "top");
 $safe-area-left: sass.fn-naming-var("safe-area", "left");
 $safe-area-right: sass.fn-naming-var("safe-area", "right");
 $border-width: sass.fn-naming-var("stroke", "width");
-$border-color: sass.fn-naming-var("action", "border-color");
 
 .#{$action} {
   // Styles
@@ -70,7 +71,7 @@ $border-color: sass.fn-naming-var("action", "border-color");
   &.divider {
     :deep(.#{$button}) {
       border-color: transparent;
-      border-bottom-color: rgb(#{$border-color});
+      border-bottom-color: rgb(#{$action-border-color});
     }
   }
 

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

@@ -4,8 +4,8 @@
 $app: sass.fn-naming-prefix("app");
 
 // Property name - layer: app
-$background-color: sass.fn-naming-var("app", "background-color");
-$color: sass.fn-naming-var("app", "color");
+$app-background-color: sass.fn-naming-var("app", "background-color");
+$app-color: sass.fn-naming-var("app", "color");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$app} {
@@ -13,8 +13,8 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
   max-width: #{sass.fn-naming-var("viewport", "max-width")};
   height: #{sass.fn-naming-var("viewport", "height")};
   max-height: #{sass.fn-naming-var("viewport", "max-height")};
-  background-color: rgb(#{$background-color});
-  color: rgb(#{$color});
+  background-color: rgb(#{$app-background-color});
+  color: rgb(#{$app-color});
   transition:
     background-color #{$transition-duration} ease,
     color #{$transition-duration} ease,

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

@@ -6,7 +6,7 @@ $shape-pill: sass.fn-naming-prefix("shape-pill");
 
 // Property - layer: avatar
 $border-radius: sass.fn-naming-var("border-radius");
-$background-color: sass.fn-naming-var("avatar", "background-color");
+$avatar-background-color: sass.fn-naming-var("avatar", "background-color");
 $width: sass.fn-naming-var("width");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
@@ -15,7 +15,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
 .#{$avatar} {
   position: relative;
   overflow: hidden;
-  background-color: rgb(#{$background-color});
+  background-color: rgb(#{$avatar-background-color});
   width: #{$width};
   aspect-ratio: 1/1;
   border-radius: #{$border-radius};

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

@@ -11,14 +11,19 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
 $spacing-x: sass.fn-naming-var("spacing", "x");
 $spacing-y: sass.fn-naming-var("spacing", "y");
 
-$color: sass.fn-naming-var("button", "color");
+$button-color: sass.fn-naming-var("button", "color");
 
-$border-color: sass.fn-naming-var("button", "border-color");
-$border-color-hover: sass.fn-naming-var("button", "border-color", "strong");
-$border-color-focus: sass.fn-naming-var("button", "border-color", "heavy");
-$border-color-active: sass.fn-naming-var("button", "border-color", "heavy");
-$border-color-disabled: sass.fn-naming-var("button", "border-color");
-$border-color-inactive: sass.fn-naming-var("button", "border-color", "soft");
+$button-border-color: sass.fn-naming-var("button", "border-color");
+$button-border-color-hover: sass.fn-naming-var("button", "border-color", "hover");
+$button-border-color-focus: sass.fn-naming-var("button", "border-color", "focus");
+$button-border-color-active: sass.fn-naming-var("button", "border-color", "active");
+$button-border-color-disabled: sass.fn-naming-var("button", "border-color", "disabled");
+
+$button-background-color: sass.fn-naming-var("button", "background-color");
+$button-background-color-hover: sass.fn-naming-var("button", "background-color", "hover");
+$button-background-color-focus: sass.fn-naming-var("button", "background-color", "focus");
+$button-background-color-active: sass.fn-naming-var("button", "background-color", "active");
+$button-background-color-disabled: sass.fn-naming-var("button", "background-color", "disabled");
 
 $size-font-size: sass.fn-naming-var("font-size");
 $size-height: sass.fn-naming-var("height");
@@ -26,22 +31,15 @@ $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");
 
-$background-color: sass.fn-naming-var("button", "background-color");
-$background-color-hover: sass.fn-naming-var("button", "background-color", "strong");
-$background-color-focus: sass.fn-naming-var("button", "background-color", "heavy");
-$background-color-active: sass.fn-naming-var("button", "background-color", "heavy");
-$background-color-disabled: sass.fn-naming-var("button", "background-color");
-$background-color-inactive: sass.fn-naming-var("button", "background-color", "soft");
-
 .#{$button} {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
-  color: rgb(#{$color});
-  background: rgb(#{$background-color});
-  border-color: rgb(#{$border-color});
+  color: rgb(#{$button-color});
+  background: rgb(#{$button-background-color});
+  border-color: rgb(#{$button-border-color});
   border-style: solid;
   border-width: #{$border-width};
   white-space: nowrap;
@@ -61,30 +59,30 @@ $background-color-inactive: sass.fn-naming-var("button", "background-color", "so
   line-height: #{$size-line-height};
 
   &:hover {
-    border-color: rgb(#{$border-color-hover});
-    background-color: rgb(#{$background-color-hover});
+    border-color: rgb(#{$button-border-color-hover});
+    background-color: rgb(#{$button-background-color-hover});
   }
 
   &.focus,
   &:focus {
-    border-color: rgb(#{$border-color-focus});
-    background-color: rgb(#{$background-color-focus});
+    border-color: rgb(#{$button-border-color-focus});
+    background-color: rgb(#{$button-background-color-focus});
 
     &.shadow {
-      box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+      box-shadow: 0 0 0 0.25rem rgb(#{$button-border-color}, 0.25);
     }
   }
 
   &:active,
   &.active {
-    border-color: rgb(#{$border-color-active});
-    background-color: rgb(#{$background-color-active});
+    border-color: rgb(#{$button-border-color-active});
+    background-color: rgb(#{$button-background-color-active});
   }
 
   &:disabled,
   &.disabled {
-    border-color: rgba(#{$border-color-disabled}, 0.5);
-    background-color: rgba(#{$background-color-disabled}, 0.5);
+    border-color: rgba(#{$button-border-color-disabled}, 0.5);
+    background-color: rgba(#{$button-background-color-disabled}, 0.5);
     cursor: not-allowed;
   }
 

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

@@ -4,14 +4,15 @@
 $card: sass.fn-naming-prefix("card");
 
 // Property name - layer: card
-$background-color: sass.fn-naming-var("card", "background-color");
-$color: sass.fn-naming-var("card", "color");
+$card-background-color: sass.fn-naming-var("card", "background-color");
+$card-color: sass.fn-naming-var("card", "color");
+
 $border-radius: sass.fn-naming-var("border-radius");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$card} {
-  background-color: rgb(#{$background-color});
-  color: rgb(#{$color});
+  background-color: rgb(#{$card-background-color});
+  color: rgb(#{$card-color});
   border-radius: #{$border-radius};
   transition:
     box-shadow #{$transition-duration} ease,

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-body/card-body.scss

@@ -4,15 +4,15 @@
 $card-body: sass.fn-naming-prefix("card-body");
 
 // Property name - layer: card
-$background-color: sass.fn-naming-var("card", "background-color");
-$color: sass.fn-naming-var("card", "color");
+$card-background-color: sass.fn-naming-var("card", "background-color");
+$card-color: sass.fn-naming-var("card", "color");
 $padding-y: sass.fn-naming-var("spacing", "y");
 $padding-x: sass.fn-naming-var("spacing", "x");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$card-body} {
-  background-color: rgb(#{$background-color});
-  color: rgb(#{$color});
+  background-color: rgb(#{$card-background-color});
+  color: rgb(#{$card-color});
   padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
   transition:
     box-shadow #{$transition-duration} ease,

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

@@ -4,18 +4,19 @@
 $card-footer: sass.fn-naming-prefix("card-footer");
 
 // Property name - layer: card
-$background-color: sass.fn-naming-var("card", "background-color");
-$color: sass.fn-naming-var("card", "color");
+$card-background-color: sass.fn-naming-var("card", "background-color");
+$card-color: sass.fn-naming-var("card", "color");
+$card-border-color: sass.fn-naming-var("card", "border-color");
+
 $padding-y: sass.fn-naming-var("spacing", "y");
 $padding-x: sass.fn-naming-var("spacing", "x");
-$border-color: sass.fn-naming-var("card", "border-color");
 $border-width: sass.fn-naming-var("stroke", "width");
 $border: #{$border-width} solid transparent;
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$card-footer} {
-  background-color: rgb(#{$background-color});
-  color: rgb(#{$color});
+  background-color: rgb(#{$card-background-color});
+  color: rgb(#{$card-color});
   padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
   border-top: #{$border};
   transition:
@@ -26,6 +27,6 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     border-radius #{$transition-duration} ease;
 
   &.divider {
-    border-color: rgb(#{$border-color});
+    border-color: rgb(#{$card-border-color});
   }
 }

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

@@ -4,18 +4,19 @@
 $card-header: sass.fn-naming-prefix("card-header");
 
 // Property name - layer: card
-$background-color: sass.fn-naming-var("card", "background-color");
-$color: sass.fn-naming-var("card", "color");
+$card-background-color: sass.fn-naming-var("card", "background-color");
+$card-color: sass.fn-naming-var("card", "color");
+$card-border-color: sass.fn-naming-var("card", "border-color");
+
 $padding-y: sass.fn-naming-var("spacing", "y");
 $padding-x: sass.fn-naming-var("spacing", "x");
-$border-color: sass.fn-naming-var("card", "border-color");
 $border-width: sass.fn-naming-var("stroke", "width");
 $border: #{$border-width} solid transparent;
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$card-header} {
-  background-color: rgb(#{$background-color});
-  color: rgb(#{$color});
+  background-color: rgb(#{$card-background-color});
+  color: rgb(#{$card-color});
   padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
   border-bottom: #{$border};
   transition:
@@ -26,6 +27,6 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     border-radius #{$transition-duration} ease;
 
   &.divider {
-    border-color: rgb(#{$border-color});
+    border-color: rgb(#{$card-border-color});
   }
 }

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 {