@toife/vue 3.3.3 → 3.3.6

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@toife/vue",
-  "version": "3.3.3",
+  "version": "3.3.6",
   "description": "A Frontend framework for Vue",
   "type": "module",
   "sideEffects": [
-    "**/*.vue",
-    "**/*.scss",
     "**/*.css"
   ],
-  "main": "./src/index.ts",
-  "module": "./src/index.ts",
-  "types": "./src/index.ts",
+  "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/*": "./dist/styles/*"
   },
   "files": [
-    "src"
+    "dist"
   ],
   "keywords": [
     "vue",
@@ -34,28 +34,19 @@
     "registry": "https://registry.npmjs.org/"
   },
   "peerDependencies": {
-    "@toife/core": "^1.0.6",
-    "@toife/gesture": "^1.1.8",
-    "@toife/sass-layer": "^1.3.0",
+    "@toife/gesture": "^1.1.10",
+    "@toife/sass-layer": "^1.4.4",
     "vue": "^3.5.0",
     "vue-router": "^4.0.0"
   },
-  "scripts": {
-    "dev": "vite",
-    "typecheck": "tsc --noEmit",
-    "build": "vite build && vite build --config vite.styles.config.ts",
-    "format": "prettier . --write",
-    "prepare": "husky || true"
-  },
   "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/core": "^1.0.6",
-    "@toife/gesture": "^1.1.8",
-    "@toife/sass-layer": "^1.3.0",
+    "@toife/gesture": "^1.1.10",
+    "@toife/sass-layer": "^1.4.4",
     "@types/node": "^25.0.3",
     "@vitejs/plugin-vue": "^6.0.1",
     "husky": "^9.1.7",
@@ -68,5 +59,10 @@
     "vue": "^3.5.0",
     "vue-router": "^4.0.0"
   },
-  "packageManager": "yarn@4.12.0"
-}
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc --noEmit",
+    "build": "vite build && vite build --config vite.styles.config.ts",
+    "format": "prettier . --write"
+  }
+}

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

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

@@ -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.vue

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

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

package/src/components/app/app.html

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

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

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

package/src/components/avatar/avatar.html

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

package/src/components/avatar/avatar.vue

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

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

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>

package/src/components/button/button.vue

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

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

package/src/components/cable/cable.html

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

package/src/components/cable/cable.vue

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/card/index.ts

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

package/src/components/checkbox/checkbox.html

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