@toife/vue 3.2.5 → 3.2.7

package/package.json

@@ -1,26 +1,25 @@
 {
   "name": "@toife/vue",
-  "version": "3.2.5",
+  "version": "3.2.7",
   "description": "A Frontend framework for Vue",
   "type": "module",
   "sideEffects": [
-    "dist/**/*.css"
+    "**/*.vue",
+    "**/*.scss",
+    "**/*.css"
   ],
-  "main": "dist/index.umd.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js",
-      "default": "./dist/index.es.js"
-    },
-    "./styles/index.css": "./dist/styles/index.css",
-    "./styles/*.css": "./dist/styles/*.css"
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
   },
   "files": [
-    "dist"
+    "src"
   ],
   "keywords": [
     "vue",
@@ -34,22 +33,19 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "dependencies": {
-    "@toife/core": "^1.0.5",
-    "@toife/gesture": "^1.1.8",
-    "@toife/sass-layer": "^1.3.0"
-  },
   "peerDependencies": {
+    "@toife/core": "^1.0.6",
+    "@toife/gesture": "^1.1.8",
+    "@toife/sass-layer": "^1.3.0",
     "vue": "^3.5.0",
     "vue-router": "^4.0.0"
   },
   "scripts": {
     "dev": "vite",
-    "typecheck": "tsc",
+    "typecheck": "tsc --noEmit",
     "build": "vite build && vite build --config vite.styles.config.ts",
-    "prepublishOnly": "yarn build",
     "format": "prettier . --write",
-    "prepare": "husky"
+    "prepare": "husky || true"
   },
   "lint-staged": {
     "*.{js,ts,vue,json,css,scss,sass,md,html}": "prettier --write"
@@ -57,6 +53,9 @@
   "devDependencies": {
     "@commitlint/cli": "^20.4.4",
     "@commitlint/config-conventional": "^20.4.4",
+    "@toife/core": "^1.0.6",
+    "@toife/gesture": "^1.1.8",
+    "@toife/sass-layer": "^1.3.0",
     "@types/node": "^25.0.3",
     "@vitejs/plugin-vue": "^6.0.1",
     "husky": "^9.1.7",

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

@@ -0,0 +1,32 @@
+import { ref } from "vue";
+import { type ActionButton, type ActionComposableProps } from "@toife/core";
+
+const data = ref<ActionComposableProps | null>(null);
+const visible = ref(false);
+
+export const useAction = () => {
+  const open = (props: ActionComposableProps) => {
+    data.value = props;
+    setTimeout(() => {
+      visible.value = true;
+    }, 50);
+  };
+
+  const close = (type?: string) => {
+    data.value?.onClose?.(type);
+    visible.value = false;
+  };
+
+  const choose = (btn: ActionButton) => {
+    data.value?.onChoose?.(btn);
+    visible.value = false;
+  };
+
+  return {
+    open,
+    close,
+    choose,
+    visible,
+    data,
+  };
+};

package/src/components/action/action.html

@@ -0,0 +1,25 @@
+<Present
+  :placement="placement"
+  backdrop="display"
+  :keepalive="false"
+  :visible="visible"
+  @close="onClose"
+>
+  <div v-bind="actionAttrs">
+    <slot name="body">
+      <FormGroup direction="vertical" v-for="(buttons, groupIndex) in actions" :key="groupIndex">
+        <CustomButton
+          v-for="(btn, btnIndex) in buttons"
+          :key="`${groupIndex}-${btnIndex}`"
+          :role="btn.role"
+          :variant="btn.variant"
+          @click="onChoose(btn)"
+          :shape="shape"
+          :shadow="btn.shadow !== undefined ? btn.shadow : shadow"
+          block
+          >{{ btn.text }}</CustomButton
+        >
+      </FormGroup>
+    </slot>
+  </div>
+</Present>

package/src/components/action/action.vue

@@ -0,0 +1,69 @@
+<style lang="scss" src="@toife/core/features/action/action.scss" scoped></style>
+<template src="./action.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject, ref } from "vue";
+import { Present } from "../present";
+import { Button as CustomButton } from "../button";
+import { FormGroup } from "../form-group";
+import {
+  ACTION_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  getActionAttrs,
+  type ActionButton,
+  type ActionEvent,
+  type ActionProps,
+  type AppProviderState,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<ActionProps>(), {
+  ...ACTION_DEFAULT_PROPS,
+});
+const emit = defineEmits<ActionEvent>();
+const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
+
+// Reactive state
+// ----------------------------------------------------------------------------
+// Brief "pop" class toggle when backdrop is tapped but the sheet stays open (visual feedback)
+const pop = ref(false);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const actionAttrs = computed(() => {
+  const divider =
+    (props?.divider !== undefined ? props.divider : unref(appState?.divider)) ?? false;
+  const shadow = (props?.shadow !== undefined ? props.shadow : unref(appState?.shadow)) ?? false;
+  const shape = props.shape ?? unref(appState?.shape) ?? "";
+  const role = props.role ?? unref(appState?.role) ?? "";
+  return getActionAttrs({
+    role,
+    shape,
+    placement: props.placement,
+    divider,
+    shadow,
+    pop: pop.value,
+  });
+});
+
+// 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") {
+    pop.value = true;
+    setTimeout(() => {
+      pop.value = false;
+    }, 300);
+  }
+};
+
+const onChoose = (btn: ActionButton) => {
+  emit("close");
+  btn.handler?.();
+  emit("choose", btn);
+};
+</script>

package/src/components/action/index.ts

@@ -0,0 +1,2 @@
+export { default as Action } from "./action.vue";
+export { useAction } from "./action.composable";

package/src/components/app/app.html

@@ -0,0 +1,24 @@
+<div ref="rootEl" v-bind="appAttrs">
+  <slot />
+  <slot name="global"></slot>
+  <Toast placement="top-start" />
+  <Toast placement="bottom-start" />
+  <Toast placement="bottom-center" />
+  <Toast placement="bottom-end" />
+  <Toast placement="top-center" />
+  <Toast placement="top-end" />
+  <Action
+    v-if="action.data.value"
+    :visible="action.visible.value"
+    v-bind="action.data.value"
+    @close="action.close"
+    @choose="action.choose"
+  />
+  <DecisionModal
+    v-if="decisionModal.data.value"
+    :visible="decisionModal.visible.value"
+    v-bind="decisionModal.data.value"
+    @close="decisionModal.close"
+    @choose="decisionModal.choose"
+  />
+</div>

package/src/components/app/app.vue

@@ -0,0 +1,45 @@
+<style lang="scss" src="@toife/core/features/app/app.scss" scoped></style>
+<template src="./app.html"></template>
+<script lang="ts" setup>
+import { computed, provide, ref, toRefs, type Ref } from "vue";
+import { Toast } from "../toast";
+import { Action, useAction } from "../action";
+import { DecisionModal, useDecisionModal } from "../decision-modal";
+import {
+  APP_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  getAppAttrs,
+  type AppProps,
+  type AppProviderState,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<AppProps>(), {
+  ...APP_DEFAULT_PROPS,
+});
+const { shape, divider, role, shadow, triple, direction, data } = toRefs(props);
+const decisionModal = useDecisionModal();
+const action = useAction();
+const rootEl = ref<HTMLElement>();
+
+// Computed properties
+// ----------------------------------------------------------------------------
+// Root layout classes for the application shell (global theme layer)
+const appAttrs = computed(() => getAppAttrs({ shape: shape.value }));
+
+// Provide / expose (public API)
+// ----------------------------------------------------------------------------
+// Theme tokens for child components (shape, role, shadows, navigation direction)
+provide<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY, {
+  shape,
+  divider,
+  role,
+  shadow,
+  triple,
+  direction,
+  rootEl: rootEl as Ref<HTMLElement | undefined>,
+  data,
+});
+</script>

package/src/components/app/index.ts

@@ -0,0 +1 @@
+export { default as App } from "./app.vue";

package/src/components/avatar/avatar.html

@@ -0,0 +1,3 @@
+<div v-bind="avatarAttrs">
+  <slot />
+</div>

package/src/components/avatar/avatar.vue

@@ -0,0 +1,35 @@
+<style lang="scss" src="@toife/core/features/avatar/avatar.scss" scoped></style>
+<template src="./avatar.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject } from "vue";
+import {
+  AVATAR_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  getAvatarAttrs,
+  type AppProviderState,
+  type AvatarProps,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<AvatarProps>(), {
+  ...AVATAR_DEFAULT_PROPS,
+});
+const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const avatarAttrs = computed(() => {
+  const shape = props?.shape || unref(appState?.shape) || "";
+  const role = props?.role || unref(appState?.role) || "";
+  const divider =
+    (props?.divider !== undefined ? props.divider : unref(appState?.divider)) ?? false;
+  return getAvatarAttrs({
+    role,
+    shape,
+    divider,
+    size: props.size,
+    src: props.src,
+  });
+});
+</script>

package/src/components/avatar/index.ts

@@ -0,0 +1 @@
+export { default as Avatar } from "./avatar.vue";

package/src/components/button/button.html

@@ -0,0 +1,6 @@
+<button v-bind="buttonAttrs" @focus="onFocus" @blur="onBlur">
+  <span v-show="!props.loading"><slot></slot></span>
+  <template v-if="props.loading">
+    <span v-bind="loaderAttrs"><slot name="loading"></slot></span>
+  </template>
+</button>

package/src/components/button/button.vue

@@ -0,0 +1,54 @@
+<style lang="scss" src="@toife/core/features/button/button.scss" scoped></style>
+<template src="./button.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject, ref } from "vue";
+import {
+  BUTTON_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  getButtonAttrs,
+  getButtonLoaderAttrs,
+  type AppProviderState,
+  type ButtonProps,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<ButtonProps>(), {
+  ...BUTTON_DEFAULT_PROPS,
+});
+const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const isFocused = ref(false);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const buttonAttrs = computed(() => {
+  const shape = props.shape || unref(appState?.shape) || "";
+  const role = props.role || unref(appState?.role) || "";
+  const shadow = (props?.shadow !== undefined ? props.shadow : unref(appState?.shadow)) ?? false;
+
+  return getButtonAttrs({
+    role,
+    shape,
+    variant: props.variant,
+    size: props.size,
+    block: props.block,
+    shadow,
+    focus: isFocused.value,
+  });
+});
+
+const loaderAttrs = getButtonLoaderAttrs();
+
+// Methods
+// ----------------------------------------------------------------------------
+const onFocus = () => {
+  isFocused.value = true;
+};
+
+const onBlur = () => {
+  isFocused.value = false;
+};
+</script>

package/src/components/button/index.ts

@@ -0,0 +1 @@
+export { default as Button } from "./button.vue";

package/src/components/cable/cable.html

@@ -0,0 +1,3 @@
+<div v-bind="cableAttrs">
+  <slot />
+</div>

package/src/components/cable/cable.vue

@@ -0,0 +1,33 @@
+<style lang="scss" src="@toife/core/features/cable/cable.scss" scoped></style>
+<template src="./cable.html"></template>
+<script lang="ts" setup>
+import { computed, provide, toRefs } from "vue";
+import {
+  CABLE_DEFAULT_PROPS,
+  CABLE_PROVIDER_STATE_KEY,
+  getCableAttrs,
+  type CableProps,
+  type CableProviderState,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<CableProps>(), {
+  ...CABLE_DEFAULT_PROPS,
+});
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const { placement } = toRefs(props);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const cableAttrs = computed(() => getCableAttrs({ placement: placement.value }));
+
+// Provide / expose (public API)
+// ----------------------------------------------------------------------------
+provide<ProviderStateRefs<CableProviderState>>(CABLE_PROVIDER_STATE_KEY, {
+  placement,
+});
+</script>

package/src/components/cable/index.ts

@@ -0,0 +1 @@
+export { default as Cable } from "./cable.vue";

package/src/components/card/card/card.html

@@ -0,0 +1,3 @@
+<div v-bind="cardAttrs">
+  <slot />
+</div>

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

@@ -0,0 +1,52 @@
+<style lang="scss" src="@toife/core/features/card/card.scss"></style>
+<template src="./card.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject, provide } from "vue";
+import {
+  CARD_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  CARD_PROVIDER_STATE_KEY,
+  getCardAttrs,
+  type AppProviderState,
+  type CardProps,
+  type CardProviderState,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<CardProps>(), {
+  ...CARD_DEFAULT_PROPS,
+});
+const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const divider = computed(() => {
+  return (props?.divider !== undefined ? props.divider : unref(appState?.divider)) ?? false;
+});
+
+const shape = computed(() => {
+  return props?.shape || unref(appState?.shape) || "";
+});
+
+const role = computed(() => {
+  return props.role || unref(appState?.role) || "";
+});
+
+const cardAttrs = computed(() =>
+  getCardAttrs({
+    role: role.value,
+    shape: shape.value,
+    divider: divider.value,
+  })
+);
+
+// Provide / expose (public API)
+// ----------------------------------------------------------------------------
+provide<ProviderStateRefs<CardProviderState>>(CARD_PROVIDER_STATE_KEY, {
+  role,
+  shape,
+  divider,
+});
+</script>

package/src/components/card/card/index.ts

@@ -0,0 +1 @@
+export { default as Card } from "./card.vue";

package/src/components/card/card-body/card-body.html

@@ -0,0 +1,3 @@
+<div v-bind="cardBodyAttrs">
+  <slot />
+</div>

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

@@ -0,0 +1,6 @@
+<style lang="scss" src="@toife/core/features/card/card-body.scss"></style>
+<template src="./card-body.html"></template>
+<script lang="ts" setup>
+import { getCardBodyAttrs } from "@toife/core";
+const cardBodyAttrs = getCardBodyAttrs();
+</script>

package/src/components/card/card-body/index.ts

@@ -0,0 +1 @@
+export { default as CardBody } from "./card-body.vue";

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

@@ -0,0 +1,3 @@
+<div v-bind="cardFooterAttrs">
+  <slot />
+</div>

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

@@ -0,0 +1,18 @@
+<style lang="scss" src="@toife/core/features/card/card-footer.scss"></style>
+<template src="./card-footer.html"></template>
+<script lang="ts" setup>
+import { computed, inject, unref } from "vue";
+import { CARD_PROVIDER_STATE_KEY, getCardFooterAttrs, type CardProviderState } from "@toife/core";
+import type { ProviderStateRefs } from "../../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const cardProviderState = inject<ProviderStateRefs<CardProviderState>>(CARD_PROVIDER_STATE_KEY);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const cardFooterAttrs = computed(() => {
+  const divider = unref(cardProviderState?.divider) ?? false;
+  return getCardFooterAttrs({ divider });
+});
+</script>

package/src/components/card/card-footer/index.ts

@@ -0,0 +1 @@
+export { default as CardFooter } from "./card-footer.vue";

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

@@ -0,0 +1,3 @@
+<div v-bind="cardHeaderAttrs">
+  <slot />
+</div>

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

@@ -0,0 +1,18 @@
+<style lang="scss" src="@toife/core/features/card/card-header.scss"></style>
+<template src="./card-header.html"></template>
+<script lang="ts" setup>
+import { computed, inject, unref } from "vue";
+import { CARD_PROVIDER_STATE_KEY, getCardHeaderAttrs, type CardProviderState } from "@toife/core";
+import type { ProviderStateRefs } from "../../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const cardProviderState = inject<ProviderStateRefs<CardProviderState>>(CARD_PROVIDER_STATE_KEY);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const cardHeaderAttrs = computed(() => {
+  const divider = unref(cardProviderState?.divider) ?? false;
+  return getCardHeaderAttrs({ divider });
+});
+</script>

package/src/components/card/card-header/index.ts

@@ -0,0 +1 @@
+export { default as CardHeader } from "./card-header.vue";

package/src/components/card/index.ts

@@ -0,0 +1,4 @@
+export * from "./card";
+export * from "./card-body";
+export * from "./card-header";
+export * from "./card-footer";

package/src/components/checkbox/checkbox.html

@@ -0,0 +1,12 @@
+<div
+  v-bind="checkboxAttrs"
+  :tabindex="disabled ? -1 : 0"
+  :aria-checked="props.modelValue"
+  @pointerup="onCheckbox"
+  @focus="onFocus"
+  @blur="onBlur"
+  @keydown="onKeydown"
+>
+  <div v-bind="checkboxIconAttrs"></div>
+  <slot></slot>
+</div>

package/src/components/checkbox/checkbox.vue

@@ -0,0 +1,74 @@
+<style lang="scss" src="@toife/core/features/checkbox/checkbox.scss" scoped></style>
+<template src="./checkbox.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject, ref } from "vue";
+import {
+  CHECKBOX_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  getCheckboxAttrs,
+  getCheckboxIconAttrs,
+  type AppProviderState,
+  type CheckboxEvent,
+  type CheckboxProps,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  ...CHECKBOX_DEFAULT_PROPS,
+});
+const emit = defineEmits<CheckboxEvent>();
+const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const isFocused = ref(false);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const checkboxAttrs = computed(() => {
+  const baseRole = unref(appState?.role) || "";
+  const role = props.role || baseRole;
+  const shape = props.shape || unref(appState?.shape) || "";
+  const shadow = (props?.shadow !== undefined ? props.shadow : unref(appState?.shadow)) ?? false;
+  return getCheckboxAttrs({
+    role,
+    shape,
+    size: props.size,
+    variant: props.variant,
+    modelValue: props.modelValue,
+    disabled: props.disabled,
+    readonly: props.readonly,
+    shadow: shadow && !props.disabled && isFocused.value,
+    focus: isFocused.value,
+  });
+});
+
+const checkboxIconAttrs = getCheckboxIconAttrs();
+
+// Methods
+// ----------------------------------------------------------------------------
+const onCheckbox = () => {
+  if (props.disabled || props.readonly) return;
+  emit("update:modelValue", !props.modelValue);
+};
+
+const onFocus = () => {
+  if (props.disabled || props.readonly) return;
+  isFocused.value = true;
+  emit("focus");
+};
+
+const onBlur = () => {
+  if (props.disabled || props.readonly) return;
+  isFocused.value = false;
+  emit("blur");
+};
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key !== " " && e.key !== "Enter") return;
+  e.preventDefault();
+  onCheckbox();
+};
+</script>