@toife/vue 3.1.6 → 3.2.0

package/package.json

@@ -1,21 +1,26 @@
 {
   "name": "@toife/vue",
-  "version": "3.1.6",
+  "version": "3.2.0",
   "description": "A Frontend framework for Vue",
   "type": "module",
-  "sideEffects": false,
-  "main": "./src/index.ts",
-  "module": "./src/index.ts",
-  "types": "./src/index.ts",
+  "sideEffects": [
+    "dist/**/*.css"
+  ],
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts",
-      "default": "./src/index.ts"
-    }
+      "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"
   },
   "files": [
-    "src"
+    "dist"
   ],
   "keywords": [
     "vue",
@@ -29,6 +34,11 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "dependencies": {
+    "@toife/core": "^1.0.0",
+    "@toife/gesture": "^1.1.8",
+    "@toife/sass-layer": "^1.2.2"
+  },
   "peerDependencies": {
     "vue": "^3.5.0",
     "vue-router": "^4.0.0"
@@ -36,7 +46,8 @@
   "scripts": {
     "dev": "vite",
     "typecheck": "tsc",
-    "build": "vite build",
+    "build": "vite build && vite build --config vite.styles.config.ts",
+    "prepublishOnly": "yarn build",
     "format": "prettier . --write",
     "prepare": "husky"
   },
@@ -46,8 +57,6 @@
   "devDependencies": {
     "@commitlint/cli": "^20.4.4",
     "@commitlint/config-conventional": "^20.4.4",
-    "@toife/gesture": "^1.1.6",
-    "@toife/sass-layer": "^1.1.2",
     "@types/node": "^25.0.3",
     "@vitejs/plugin-vue": "^6.0.1",
     "husky": "^9.1.7",
@@ -56,6 +65,7 @@
     "sass": "^1.90.0",
     "typescript": "^5.9.2",
     "vite": "^7.0.6",
+    "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.0",
     "vue-router": "^4.0.0"
   },

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

@@ -1,32 +0,0 @@
-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

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

@@ -1,106 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$action: sass.fn-naming-prefix("action");
-$button: sass.fn-naming-prefix("button");
-
-// 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");
-$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");
-$transition-duration: sass.fn-naming-var("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");
-
-.#{$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: rgba(#{$action-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

@@ -1,44 +0,0 @@
-import { ButtonVariant } from "../button/button.type";
-import { PresentPlacement } from "../present";
-
-export type ActionPlacement = PresentPlacement;
-
-// Type definitions
-export type ActionButton = {
-  text?: string;
-  role?: string;
-  variant?: ButtonVariant;
-  shadow?: boolean;
-  handler?: () => void;
-  data?: unknown;
-};
-
-/**
- * Action Props Type
- */
-export type ActionProps = {
-  visible?: boolean;
-  dismiss?: string[];
-  actions: Array<ActionButton[]>;
-  role?: string;
-  shape?: string;
-  divider?: boolean;
-  shadow?: boolean;
-  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

@@ -1,72 +0,0 @@
-<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 { cssPrefix } from "../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<ActionProps>(), {
-  visible: false,
-  shape: undefined,
-  role: undefined,
-  placement: "bottom",
-  divider: undefined,
-  shadow: undefined,
-});
-const emit = defineEmits<ActionEmit>();
-const appState = inject<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 : appState?.divider.value) ?? false;
-  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
-  const shape = props.shape ?? appState?.shape.value ?? "";
-  const role = props.role ?? appState?.role.value ?? "";
-  return {
-    class: [
-      cssPrefix("action"),
-      cssPrefix(["layer", "action"]),
-      cssPrefix(["role", role]),
-      cssPrefix(["shape", shape]),
-      props.placement,
-      {
-        pop: pop.value,
-        divider,
-        shadow,
-      },
-    ],
-  };
-});
-
-// 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

@@ -1,9 +0,0 @@
-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

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

package/src/components/app/app.html

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

@@ -1,27 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$app: sass.fn-naming-prefix("app");
-
-// Property name - layer: app
-$app-background-color: sass.fn-naming-var("app", "background-color");
-$app-color: sass.fn-naming-var("app", "color");
-$transition-duration: sass.fn-naming-var("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: rgba(#{$app-background-color});
-  color: rgba(#{$app-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

@@ -1,30 +0,0 @@
-import type { Ref } from "vue";
-
-/**
- * App Direction Type
- */
-export type AppDirection = "left" | "right";
-
-/**
- * App Props Type
- */
-export type AppProps = {
-  shape?: string;
-  divider?: boolean;
-  role?: string;
-  shadow?: boolean;
-  triple?: boolean;
-  direction?: AppDirection;
-};
-
-/**
- * App Provider State Type
- */
-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

@@ -1,46 +0,0 @@
-<style lang="scss" src="./app.scss" scoped></style>
-<template src="./app.html"></template>
-<script lang="ts" setup>
-import { cssPrefix } 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";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-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 properties
-// ----------------------------------------------------------------------------
-// Root layout classes for the application shell (global theme layer)
-const appAttrs = computed(() => {
-  return {
-    class: [cssPrefix("app"), cssPrefix(["layer", "app"]), cssPrefix(["shape", shape.value])],
-  };
-});
-
-// Provide / expose (public API)
-// ----------------------------------------------------------------------------
-// Theme tokens for child components (shape, role, shadows, navigation direction)
-provide<AppProviderState>(APP_PROVIDER_STATE_KEY, {
-  shape,
-  divider,
-  role,
-  shadow,
-  triple,
-  direction,
-});
-</script>

package/src/components/app/index.ts

@@ -1,3 +0,0 @@
-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

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

package/src/components/avatar/avatar.scss

@@ -1,45 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class
-$avatar: sass.fn-naming-prefix("avatar");
-$shape-pill: sass.fn-naming-prefix("shape-pill");
-
-// Property - layer: avatar
-$radius-ratio: sass.fn-naming-var("radius-ratio");
-$radius-size: sass.fn-naming-var("radius-size");
-$border-width: sass.fn-naming-var("stroke", "width");
-$width: sass.fn-naming-var("width");
-$transition-duration: sass.fn-naming-var("duration");
-
-$avatar-background-color: sass.fn-naming-var("avatar", "background-color");
-$avatar-border-color: sass.fn-naming-var("avatar", "border-color");
-
-// Avatar default is circle
-// With props square then is square
-.#{$avatar} {
-  position: relative;
-  overflow: hidden;
-  background-color: rgba(#{$avatar-background-color});
-  width: #{$width};
-  aspect-ratio: 1/1;
-  border-radius: calc(min(#{$width}, #{$radius-size}) * #{$radius-ratio});
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  transition:
-    background-color #{$transition-duration} ease,
-    color #{$transition-duration} ease,
-    border-color #{$transition-duration} ease,
-    box-shadow #{$transition-duration} ease,
-    border-radius #{$transition-duration} ease;
-  display: inline-block;
-  border: #{$border-width} solid transparent;
-
-  &.#{$shape-pill} {
-    border-radius: 50%;
-  }
-
-  &.divider {
-    border: #{$border-width} solid rgba(#{$avatar-border-color});
-  }
-}

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

@@ -1,8 +0,0 @@
-// Type definitions
-export type AvatarProps = {
-  shape?: string;
-  size?: string | number;
-  src?: string;
-  role?: string;
-  divider?: boolean;
-};

package/src/components/avatar/avatar.vue

@@ -1,44 +0,0 @@
-<style lang="scss" src="./avatar.scss" scoped></style>
-<template src="./avatar.html"></template>
-<script lang="ts" setup>
-import { computed, inject } from "vue";
-import { type AvatarProps } from "./avatar.type";
-import { cssProperty, cssPrefix } from "../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<AvatarProps>(), {
-  size: "22px",
-  src: "",
-  role: undefined,
-  divider: undefined,
-});
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const avatarAttrs = computed(() => {
-  const shape = props?.shape || appState?.shape.value || "";
-  const role = props?.role || appState?.role.value || "";
-  const divider = (props?.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
-  const size = props.size + (typeof props.size === "number" ? "px" : "");
-  const backgroundImage = `url(${props.src})`;
-
-  return {
-    class: [
-      cssPrefix(["layer", "avatar"]),
-      cssPrefix(["role", role]),
-      cssPrefix(["shape", shape]),
-      cssPrefix("avatar"),
-      {
-        divider: divider,
-      },
-    ],
-    style: {
-      [cssProperty("width")]: size,
-      backgroundImage: backgroundImage,
-    },
-  };
-});
-</script>

package/src/components/avatar/index.ts

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

package/src/components/button/button.html

@@ -1,6 +0,0 @@
-<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>