@toife/vue 2.2.0 → 3.0.0

package/README.md

@@ -0,0 +1,171 @@
+# @toife/vue
+
+Vue 3 component library for Toife. The package ships **source** (`src/`): your app bundles it and compiles Sass with your own configuration.
+
+## Requirements
+
+| Package | Notes |
+|---------|--------|
+| `vue` ^3.5 | Required |
+| `vue-router` ^4 | Required when using route-related components |
+| `@toife/gesture` | Gestures |
+| `@toife/sass-layer-generator` | Component SCSS uses `@use`; install in the app and configure Sass (e.g. Vite `css.preprocessorOptions`) |
+
+## Installation
+
+```bash
+npm install @toife/vue
+# or
+yarn add @toife/vue
+```
+
+Install any missing peer dependencies if npm/yarn reports them.
+
+## Global registration (plugin)
+
+`createToife()` registers most components as **kebab-case** tags with the default prefix `t-`.
+
+```ts
+// main.ts
+import { createApp } from "vue";
+import { createToife } from "@toife/vue";
+import App from "./App.vue";
+
+const app = createApp(App);
+app.use(createToife());
+// or change the prefix:
+// app.use(createToife({ prefix: "toife-" })); // → <toife-app>, <toife-button>, ...
+app.mount("#app");
+```
+
+```vue
+<!-- Example: default prefix "t-" -->
+<template>
+  <t-app>
+    <t-page>
+      <t-toolbar />
+      <t-container>
+        <t-button>OK</t-button>
+      </t-container>
+    </t-page>
+  </t-app>
+</template>
+```
+
+### `createToife` options
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `prefix` | `string` | `"t-"` | Tag name prefix (e.g. `my-` → `<my-button>`) |
+
+## Tags after `app.use(createToife())`
+
+The default prefix is `t-`. The **Tag** column is `prefix` + name (e.g. `t-button`).
+
+| Tag (prefix `t-`) | Component |
+|-------------------|-----------|
+| `t-app` | App |
+| `t-action` | Action |
+| `t-avatar` | Avatar |
+| `t-button` | Button |
+| `t-cable` | Cable |
+| `t-card` | Card |
+| `t-card-body` | CardBody |
+| `t-card-header` | CardHeader |
+| `t-card-footer` | CardFooter |
+| `t-checkbox` | Checkbox |
+| `t-radio` | Radio |
+| `t-radio-group` | RadioGroup |
+| `t-collapse` | Collapse |
+| `t-container` | Container |
+| `t-decision-modal` | DecisionModal |
+| `t-divider` | Divider |
+| `t-field` | Field |
+| `t-form-group` | FormGroup |
+| `t-gesture-indicator` | GestureIndicator |
+| `t-image` | Image |
+| `t-modal` | Modal |
+| `t-page` | Page |
+| `t-present` | Present |
+| `t-refresher` | Refresher |
+| `t-route-navigator` | RouteNavigator |
+| `t-route-wrapper` | RouteWrapper |
+| `t-route-provider` | RouteProvider |
+| `t-route-outlet` | RouteOutlet |
+| `t-segmented-field` | SegmentedField |
+| `t-skeleton` | Skeleton |
+| `t-switch` | Switch |
+| `t-tabs` | Tabs |
+| `t-toast` | Toast |
+| `t-toast-content` | ToastContent |
+| `t-toolbar` | Toolbar |
+
+### Components not registered by the plugin
+
+These are **still exported** from `@toife/vue` but are **not** included in `createToife().install` — import them directly and call `app.component(...)` yourself if you need globals:
+
+- `Tab` — used inside `Tabs`; `import { Tab, Tabs } from "@toife/vue"`.
+- `OutlineField` — `import { OutlineField } from "@toife/vue"`.
+
+```ts
+import { Tab, OutlineField } from "@toife/vue";
+
+app.component("t-tab", Tab);
+app.component("t-outline-field", OutlineField);
+```
+
+Or use them only in SFCs: `import { Tab } from "@toife/vue"` and register locally / use in a parent template.
+
+## Named imports (without the plugin)
+
+You can always import components and register them manually or use them locally:
+
+```vue
+<script setup lang="ts">
+import { Button, App, RouteNavigator, RouteWrapper } from "@toife/vue";
+</script>
+
+<template>
+  <App>
+    <RouteWrapper>
+      <RouteNavigator variant="swipe" />
+    </RouteWrapper>
+  </App>
+</template>
+```
+
+Public exports are defined in `src/index.ts` (factory, re-exported `./components`, and `utils`).
+
+## Vue Router
+
+`RouteNavigator`, `RouteWrapper`, `RouteProvider`, and `RouteOutlet` expect `vue-router` to be installed and configured in your app.
+
+## TypeScript
+
+The package includes `*.vue` declarations via the entry; if your IDE still complains about `.vue` modules, add this to your project (Vite):
+
+```ts
+// env.d.ts
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+```
+
+## Utilities
+
+```ts
+import { utils } from "@toife/vue";
+// utils.* — see exports under src/utils
+```
+
+See `src/utils` in the repo for concrete APIs.
+
+## Sass / theming
+
+Component styles use `@use "@toife/sass-layer-generator"` and SCSS under `src`. Configure **sass-embedded** / **sass** and any aliases in **your** app so tokens, layers, and variables resolve when you build.
+
+## License
+
+MIT

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "@toife/vue",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "A Frontend framework for Vue",
   "type": "module",
-  "main": "dist/index.umd.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
   "files": [
-    "dist"
+    "src"
   ],
   "keywords": [
     "vue",
@@ -17,19 +22,46 @@
   ],
   "author": "Toikit",
   "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "peerDependencies": {
     "@toife/gesture": "^1.1.4",
-    "vue": "^3.5.19",
-    "vue-router": "^4.5.1"
+    "@toife/sass-layer-generator": "^1.0.9",
+    "vue": "^3.5.0",
+    "vue-router": "^4.0.0"
   },
   "scripts": {
-    "build": "vite build"
+    "dev": "vite",
+    "typecheck": "tsc --noEmit",
+    "build": "vite build",
+    "format": "prettier . --write",
+    "prepare": "husky",
+    "test:dev": "vite --config test/vite.config.ts",
+    "test:build": "vite build --config test/vite.config.ts"
+  },
+  "lint-staged": {
+    "*.{js,ts,vue,json,css,scss,sass,md,html}": "prettier --write"
   },
   "devDependencies": {
+    "@commitlint/cli": "^20.4.4",
+    "@commitlint/config-conventional": "^20.4.4",
+    "@toife/sass-layer-generator": "^1.0.9",
+    "@types/node": "^25.0.3",
     "@vitejs/plugin-vue": "^6.0.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.4.0",
+    "prettier": "3.7.4",
     "sass": "^1.90.0",
     "typescript": "^5.9.2",
     "vite": "^7.0.6",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.5.0",
+    "vue-router": "^4.0.0"
+  },
+  "packageManager": "yarn@4.12.0",
+  "dependencies": {
+    "@toife/gesture": "^1.1.4"
   }
 }

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

@@ -0,0 +1,32 @@
+import { ref } from "vue";
+import type { ActionButton, ActionComposableProps } from "./action.type";
+
+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 orientation="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.scss

@@ -0,0 +1,106 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$action: sass.fn-naming-prefix("action");
+$button: sass.fn-naming-prefix("button");
+
+// Property name
+$margin-y: sass.fn-naming-var("spacing", "y");
+$margin-x: sass.fn-naming-var("spacing", "x");
+$width: sass.fn-naming-var("viewport", "width");
+$max-width: sass.fn-naming-var("overlay", "max-width");
+$height: sass.fn-naming-var("viewport", "height");
+$max-height: sass.fn-naming-var("overlay", "max-height");
+$background-color: sass.fn-naming-var("surface", "background-color");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+$safe-area-bottom: sass.fn-naming-var("safe-area", "bottom");
+$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("item", "border-color");
+
+.#{$action} {
+  // Styles
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  column-gap: calc(#{$margin-y} * 2);
+  row-gap: calc(#{$margin-x} * 2);
+  border-width: #{$border-width};
+
+  &.top,
+  &.bottom {
+    width: #{$width};
+
+    > div {
+      width: 100%;
+      max-width: #{$max-width};
+    }
+  }
+
+  &.bottom {
+    margin-bottom: calc(#{$margin-y} * 4 + #{$safe-area-bottom});
+  }
+
+  &.top {
+    margin-top: calc(#{$margin-y} * 4 + #{$safe-area-top});
+  }
+
+  &.left,
+  &.right {
+    > div {
+      width: 100%;
+      max-width: #{$max-width};
+    }
+  }
+
+  &.left {
+    margin-left: calc(#{$margin-x} * 4 + #{$safe-area-left});
+  }
+
+  &.right {
+    margin-right: calc(#{$margin-x} * 4 + #{$safe-area-right});
+  }
+
+  &.pop {
+    animation: pop #{$transition-duration} ease-in-out;
+  }
+
+  &.divider {
+    :deep(.#{$button}) {
+      border-color: transparent;
+      border-bottom-color: rgb(#{$border-color});
+    }
+  }
+
+  &:not(.divider) {
+    :deep(.#{$button}) {
+      border-color: transparent;
+    }
+  }
+}
+
+// Effect when click outside action modal
+@keyframes pop {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  70% {
+    transform: scale(1);
+  }
+
+  80% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

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

@@ -0,0 +1,35 @@
+import { ButtonVariant } from "../button/button.type";
+import { PresentPlacement } from "../present";
+
+export type ActionPlacement = PresentPlacement;
+
+// Define
+export type ActionButton = {
+  text?: string;
+  role?: string;
+  variant?: ButtonVariant;
+  shadow?: boolean;
+  handler?: () => void;
+  data?: unknown;
+};
+
+export type ActionProps = {
+  visible?: boolean;
+  dismiss?: string[];
+  actions: Array<ActionButton[]>;
+  role?: string;
+  shape?: string;
+  divider?: boolean;
+  shadow?: boolean;
+  placement?: ActionPlacement;
+};
+
+export type ActionComposableProps = ActionProps & {
+  onClose?: (type?: string) => void;
+  onChoose?: (btn?: ActionButton) => void;
+};
+
+export type ActionEmit = {
+  (e: "close", type?: string): void;
+  (e: "choose", btn: ActionButton): void;
+};

package/src/components/action/action.vue

@@ -0,0 +1,82 @@
+<style lang="scss" src="./action.scss" scoped></style>
+<template src="./action.html"></template>
+<script lang="ts" setup>
+import { computed, inject, ref } from "vue";
+import { Present } from "../present";
+import { Button as CustomButton } from "../button";
+import { FormGroup } from "../form-group";
+import { type ActionEmit, type ActionButton, type ActionProps } from "./action.type";
+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>();
+const props = withDefaults(defineProps<ActionProps>(), {
+  visible: false,
+  shape: undefined,
+  role: undefined,
+  placement: "bottom",
+  divider: undefined,
+  shadow: undefined,
+});
+
+/// State
+/// ------------------------------------------------------------
+const pop = ref(false);
+
+/// Computed
+/// ------------------------------------------------------------
+const divider = computed(() => {
+  return (props?.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
+});
+
+const shadow = computed(() => {
+  return (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
+});
+
+const shape = computed(() => {
+  return props.shape ?? appState?.shape.value ?? "";
+});
+
+const role = computed(() => {
+  return props.role ?? appState?.role.value ?? "";
+});
+
+const actionAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix("action"),
+      withPrefix(["layer", "surface"]),
+      withPrefix(["role", role.value]),
+      withPrefix(["shape", shape.value]),
+      props.placement,
+      {
+        pop: pop.value,
+        divider: divider.value,
+        shadow: shadow.value,
+      },
+    ],
+  };
+});
+
+/// Methods
+/// ------------------------------------------------------------
+const onClose = (val: string) => {
+  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,9 @@
+export { default as Action } from "./action.vue";
+export type {
+  ActionProps,
+  ActionEmit,
+  ActionButton,
+  ActionPlacement,
+  ActionComposableProps,
+} from "./action.type";
+export { useAction } from "./action.composable";

package/src/components/app/app.constants.ts

@@ -0,0 +1 @@
+export const APP_PROVIDER_STATE_KEY = "app-state";

package/src/components/app/app.html

@@ -0,0 +1,24 @@
+<div 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.scss

@@ -0,0 +1,27 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$app: sass.fn-naming-prefix("app");
+
+// Property name - layer: base
+$background-color: sass.fn-naming-var("base", "background-color");
+$color: sass.fn-naming-var("base", "color");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$app} {
+  width: #{sass.fn-naming-var("viewport", "width")};
+  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});
+  transition:
+    background-color #{$transition-duration} ease,
+    color #{$transition-duration} ease,
+    border-color #{$transition-duration} ease;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}

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

@@ -0,0 +1,21 @@
+import type { Ref } from "vue";
+
+export type AppDirection = "left" | "right";
+
+export type AppProps = {
+  shape?: string;
+  divider?: boolean;
+  role?: string;
+  shadow?: boolean;
+  triple?: boolean;
+  direction?: AppDirection;
+};
+
+export type AppProviderState = {
+  shape: Ref<string>;
+  divider: Ref<boolean>;
+  role: Ref<string>;
+  shadow: Ref<boolean>;
+  triple: Ref<boolean>;
+  direction: Ref<AppDirection>;
+};

package/src/components/app/app.vue

@@ -0,0 +1,45 @@
+<style lang="scss" src="./app.scss" scoped></style>
+<template src="./app.html"></template>
+<script lang="ts" setup>
+import { withPrefix } from "../../utils";
+import { computed, provide, toRefs } from "vue";
+import { Toast } from "../toast";
+import { Action, useAction } from "../action";
+import { DecisionModal, useDecisionModal } from "../decision-modal";
+import { type AppProviderState, type AppProps } from "./app.type";
+import { APP_PROVIDER_STATE_KEY } from "./app.constants";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<AppProps>(), {
+  shape: "pill",
+  divider: false,
+  role: "mode",
+  shadow: false,
+  triple: false,
+  direction: "left",
+});
+const { shape, divider, role, shadow, triple, direction } = toRefs(props);
+const decisionModal = useDecisionModal();
+const action = useAction();
+
+/// Computed
+/// ------------------------------------------------------------
+// Present attributes
+const appAttrs = computed(() => {
+  return {
+    class: [withPrefix(["layer", "base"]), withPrefix(["shape", shape.value]), withPrefix("app")],
+  };
+});
+
+// Export, Expose
+/// ------------------------------------------------------------
+provide<AppProviderState>(APP_PROVIDER_STATE_KEY, {
+  shape,
+  divider,
+  role,
+  shadow,
+  triple,
+  direction,
+});
+</script>

package/src/components/app/index.ts

@@ -0,0 +1,3 @@
+export { default as App } from "./app.vue";
+export * from "./app.type";
+export { APP_PROVIDER_STATE_KEY } from "./app.constants";

package/src/components/avatar/avatar.html

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