@toife/vue 2.2.0 → 3.0.1

package/src/components/checkbox/checkbox.md

@@ -0,0 +1,60 @@
+# `<t-checkbox>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Custom boolean checkbox (not a native `<input type="checkbox">`), with `v-model` and readonly/disabled states.
+
+## Requirements / dependencies
+
+| Item  | Notes                |
+| ----- | -------------------- |
+| Vue   | ^3.5                 |
+| Other | `t-app` recommended. |
+
+## Basic usage
+
+```vue
+<t-checkbox v-model="checked">I agree</t-checkbox>
+```
+
+## Props
+
+| Prop         | Type                  | Default  | Description              |
+| ------------ | --------------------- | -------- | ------------------------ |
+| `modelValue` | `boolean`             | `false`  | Value (`v-model`).       |
+| `role`       | `string`              | —        | Theme; default from app. |
+| `shape`      | `string`              | —        | Shape; default from app. |
+| `variant`    | `"fill" \| "outline"` | `"fill"` | Visual variant.          |
+| `readonly`   | `boolean`             | `false`  | Read-only.               |
+| `disabled`   | `boolean`             | `false`  | Disabled.                |
+| `shadow`     | `boolean`             | —        | Default from app.        |
+
+**Type source:** `src/components/checkbox/checkbox.type.ts`
+
+## Events (emits)
+
+| Event               | Payload   | Description                           |
+| ------------------- | --------- | ------------------------------------- |
+| `update:modelValue` | `boolean` | Updates `v-model`.                    |
+| `focus`             | —         | When focused (not disabled/readonly). |
+| `blur`              | —         | When blurred.                         |
+
+## Slots
+
+| Slot      | Description             |
+| --------- | ----------------------- |
+| `default` | Label next to the icon. |
+
+## `v-model`
+
+`modelValue` / `update:modelValue`.
+
+## Accessibility (a11y)
+
+`role="checkbox"`, `aria-checked`, `tabindex` 0 or -1; Space/Enter toggles.
+
+## See also
+
+- Source: `src/components/checkbox`

package/src/components/checkbox/checkbox.scss

@@ -0,0 +1,138 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Classes
+$checkbox: sass.fn-naming-prefix("checkbox");
+$checkbox-icon: sass.fn-naming-prefix("checkbox-icon");
+$shape-rounded: sass.fn-naming-prefix("shape-rounded");
+$shape-pill: sass.fn-naming-prefix("shape-pill");
+
+// Properties - layer: item
+$background-color: sass.fn-naming-var("checkbox", "background-color");
+$background-color-hover: sass.fn-naming-var("checkbox", "background-color", "soft");
+$background-color-inactive: sass.fn-naming-var("checkbox", "background-color", "soft");
+$background-color-contrast: sass.fn-naming-var("checkbox", "background-color", "contrast");
+$background-color-disabled: sass.fn-naming-var("checkbox", "background-color", "subtle");
+
+$color: sass.fn-naming-var("checkbox", "color");
+
+$border-color: sass.fn-naming-var("checkbox", "border-color");
+$border-color-inactive: sass.fn-naming-var("checkbox", "border-color", "subtle");
+
+$transition-duration: sass.fn-naming-var("motion", "duration");
+$border-radius: sass.fn-naming-var("border-radius");
+
+.#{$checkbox} {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  box-shadow: none !important;
+
+  .#{$checkbox-icon} {
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgb(#{$border-color-inactive});
+    background-color: transparent;
+    transition:
+      box-shadow #{$transition-duration} ease,
+      border-color #{$transition-duration} ease,
+      background-color #{$transition-duration} ease,
+      color #{$transition-duration} ease,
+      border-radius #{$transition-duration} ease,
+      transform #{$transition-duration} ease;
+    border-radius: calc(#{$border-radius} * 0.5);
+    box-sizing: border-box;
+
+    &::after {
+      content: "";
+      width: 0.2rem;
+      height: 0.5rem;
+      border: solid rgb(#{$background-color-contrast});
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg) scale(0);
+      transform-origin: center;
+      transition:
+        transform #{$transition-duration} ease,
+        background-color #{$transition-duration} ease,
+        color #{$transition-duration} ease,
+        border-color #{$transition-duration} ease;
+      margin-bottom: 0.15rem;
+    }
+  }
+
+  &.#{$shape-rounded} .#{$checkbox-icon} {
+    border-radius: calc(#{$border-radius} - 10%);
+  }
+
+  &.#{$shape-pill} .#{$checkbox-icon} {
+    border-radius: 50%;
+  }
+
+  &:not(.on) {
+    .#{$checkbox-icon} {
+      background-color: transparent;
+      border-color: rgb(#{$border-color-inactive});
+    }
+
+    &:not(.disabled):not(.readonly):hover {
+      .#{$checkbox-icon} {
+        border-color: rgb(#{$border-color});
+        background-color: rgba(#{$background-color-hover}, 0.2);
+      }
+    }
+  }
+
+  &.on {
+    &.fill {
+      .#{$checkbox-icon} {
+        background-color: rgb(#{$background-color});
+        border-color: rgb(#{$background-color});
+
+        &::after {
+          transform: rotate(45deg) scale(1);
+        }
+      }
+    }
+
+    &.outline {
+      .#{$checkbox-icon} {
+        border-color: rgb(#{$background-color});
+
+        &::after {
+          transform: rotate(45deg) scale(1);
+          border-color: rgb(#{$background-color});
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+
+    &.on {
+      .#{$checkbox-icon} {
+        background-color: rgb(#{$background-color-disabled});
+        border-color: rgb(#{$background-color-disabled});
+      }
+    }
+  }
+
+  &.readonly {
+    cursor: default;
+  }
+
+  &.focus {
+    &.shadow {
+      .#{$checkbox-icon} {
+        box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+      }
+    }
+  }
+}

package/src/components/checkbox/checkbox.type.ts

@@ -0,0 +1,17 @@
+export type CheckboxVariant = "fill" | "outline";
+
+export type CheckboxProps = {
+  modelValue?: boolean;
+  role?: string;
+  shape?: string;
+  variant?: CheckboxVariant;
+  readonly?: boolean;
+  disabled?: boolean;
+  shadow?: boolean;
+};
+
+export type CheckboxEmit = {
+  (e: "update:modelValue", value: boolean): void;
+  (e: "focus"): void;
+  (e: "blur"): void;
+};

package/src/components/checkbox/checkbox.vue

@@ -0,0 +1,78 @@
+<style lang="scss" src="./checkbox.scss" scoped></style>
+<template src="./checkbox.html"></template>
+<script lang="ts" setup>
+import { computed, inject, ref } from "vue";
+import type { CheckboxProps, CheckboxEmit } from "./checkbox.type";
+import { withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  modelValue: false,
+  disabled: false,
+  variant: "fill",
+  readonly: false,
+  shadow: undefined,
+});
+const emit = defineEmits<CheckboxEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// State
+/// ------------------------------------------------------------
+const isFocused = ref(false);
+
+/// Computed
+/// ------------------------------------------------------------
+const checkboxAttrs = computed(() => {
+  const baseRole = appState?.role.value || "";
+  const role = props.role || baseRole;
+  const shape = props.shape || appState?.shape.value || "";
+  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
+  return {
+    class: [
+      withPrefix(["layer", "checkbox"]),
+      withPrefix(["role", props.modelValue && !props.disabled ? role : baseRole]),
+      withPrefix(["shape", shape]),
+      withPrefix("checkbox"),
+      props.variant,
+      {
+        on: props.modelValue,
+        disabled: props.disabled,
+        readonly: props.readonly,
+        shadow,
+        focus: isFocused.value,
+      },
+    ],
+  };
+});
+
+const checkboxIconAttrs = {
+  class: [withPrefix("checkbox-icon")],
+} as const;
+
+/// 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>

package/src/components/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from "./checkbox.vue";
+export type { CheckboxProps } from "./checkbox.type";

package/src/components/collapse/collapse.html

@@ -0,0 +1,16 @@
+<div v-bind="wrapperAttrs">
+  <div
+    v-bind="triggerAttrs"
+    role="button"
+    tabindex="0"
+    @click="toggle"
+    @keydown.enter.space.prevent="toggle"
+  >
+    <slot name="trigger" />
+  </div>
+  <div v-bind="contentAttrs" @transitionend="onTransitionEnd">
+    <div ref="contentRef" :class="contentInnerClass">
+      <slot />
+    </div>
+  </div>
+</div>

package/src/components/collapse/collapse.md

@@ -0,0 +1,59 @@
+# `<t-collapse>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Expand/collapse panel with height animation; separate slots for trigger and content.
+
+## Requirements / dependencies
+
+| Item  | Notes                |
+| ----- | -------------------- |
+| Vue   | ^3.5                 |
+| Other | `t-app` recommended. |
+
+## Basic usage
+
+```vue
+<t-collapse v-model="open">
+  <template #trigger>Expand</template>
+  <p>Hidden content</p>
+</t-collapse>
+```
+
+## Props
+
+| Prop         | Type      | Default | Description                                        |
+| ------------ | --------- | ------- | -------------------------------------------------- |
+| `modelValue` | `boolean` | `false` | Open (`true`) / closed.                            |
+| `duration`   | `number`  | —       | Transition duration (ms), mapped to CSS variables. |
+| `role`       | `string`  | —       | Theme role.                                        |
+| `disabled`   | `boolean` | `false` | Disables toggling.                                 |
+
+**Type source:** `src/components/collapse/collapse.type.ts`
+
+## Events (emits)
+
+| Event               | Payload   | Description   |
+| ------------------- | --------- | ------------- |
+| `update:modelValue` | `boolean` | After toggle. |
+
+## Slots
+
+| Slot      | Description                         |
+| --------- | ----------------------------------- |
+| `trigger` | Clickable header (`role="button"`). |
+| `default` | Collapsible content.                |
+
+## `v-model`
+
+`modelValue` / `update:modelValue`.
+
+## Accessibility (a11y)
+
+Trigger: `role="button"`, `aria-expanded`, `aria-disabled`; Enter/Space toggles.
+
+## See also
+
+- Source: `src/components/collapse`

package/src/components/collapse/collapse.scss

@@ -0,0 +1,59 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class
+$collapse: sass.fn-naming-prefix("collapse");
+$collapse-trigger: sass.fn-naming-prefix("collapse-trigger");
+$collapse-content: sass.fn-naming-prefix("collapse-content");
+$collapse-content-inner: sass.fn-naming-prefix("collapse-content-inner");
+
+// Property
+$collapse-height: sass.fn-naming-dvar("collapse-height", 0);
+$collapse-duration: sass.fn-naming-dvar(
+  "collapse-duration",
+  sass.fn-naming-var("motion", "duration")
+);
+
+$background-color: sass.fn-naming-var("collapse", "background-color");
+$color: sass.fn-naming-var("collapse", "color");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+// Collapse
+.#{$collapse} {
+  background-color: rgb(#{$background-color});
+  color: rgb(#{$color});
+  transition:
+    background-color #{$transition-duration} ease,
+    color #{$transition-duration} ease;
+
+  &.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+// Trigger
+.#{$collapse-trigger} {
+  cursor: pointer;
+  user-select: none;
+  border: none;
+  background: none;
+  width: 100%;
+  padding: 0;
+  text-align: inherit;
+  font: inherit;
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+// Content wrapper - height animated from Vue
+.#{$collapse-content} {
+  overflow: hidden;
+  height: #{$collapse-height};
+  transition: height #{$collapse-duration} ease;
+}

package/src/components/collapse/collapse.type.ts

@@ -0,0 +1,11 @@
+// Define
+export type CollapseProps = {
+  modelValue?: boolean;
+  duration?: number;
+  role?: string;
+  disabled?: boolean;
+};
+
+export type CollapseEmit = {
+  (e: "update:modelValue", value: boolean): void;
+};

package/src/components/collapse/collapse.vue

@@ -0,0 +1,131 @@
+<style lang="scss" src="./collapse.scss" scoped></style>
+<template src="./collapse.html"></template>
+<script lang="ts" setup>
+import { computed, inject, nextTick, onMounted, ref, watch } from "vue";
+import type { CollapseEmit, CollapseProps } from "./collapse.type";
+import { withPrefix, property } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<CollapseProps>(), {
+  modelValue: false,
+  duration: undefined,
+  role: undefined,
+  disabled: false,
+});
+const emit = defineEmits<CollapseEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// State
+/// ------------------------------------------------------------
+const contentRef = ref<HTMLElement | null>(null);
+const contentHeight = ref(0);
+const isOpen = ref(false);
+
+/// Computed
+/// ------------------------------------------------------------
+const role = computed(() => {
+  return props.role ?? appState?.role.value ?? "";
+});
+
+const durationCss = computed(() =>
+  props.duration !== undefined ? `${props.duration / 1000}s` : undefined
+);
+
+const wrapperAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix(["layer", "collapse"]),
+      withPrefix(["role", role.value]),
+      withPrefix("collapse"),
+      {
+        open: isOpen.value,
+        disabled: props.disabled,
+      },
+    ],
+  };
+});
+
+const triggerAttrs = computed(() => {
+  return {
+    class: [withPrefix("collapse-trigger")],
+    "aria-expanded": isOpen.value,
+    "aria-disabled": props.disabled,
+  };
+});
+
+const contentAttrs = computed(() => {
+  return {
+    class: [withPrefix("collapse-content")],
+    style: {
+      [property("collapse-duration")]: durationCss.value || undefined,
+      [property("collapse-height")]: isOpen.value ? `${contentHeight.value}px` : "0px",
+    },
+  };
+});
+
+const contentInnerClass = computed(() => withPrefix("collapse-content-inner"));
+
+/// Methods
+/// ------------------------------------------------------------
+const measureContent = () => {
+  if (contentRef.value) {
+    contentHeight.value = contentRef.value.scrollHeight;
+  }
+};
+
+const toggle = () => {
+  if (props.disabled) return;
+  isOpen.value = !isOpen.value;
+  emit("update:modelValue", isOpen.value);
+};
+
+const onTransitionEnd = () => {
+  // Optional: hook for transition end (e.g. a11y)
+};
+
+/// Lifecycle
+/// ------------------------------------------------------------
+onMounted(async () => {
+  if (isOpen.value) {
+    await nextTick();
+    measureContent();
+  }
+});
+
+watch(
+  () => props.modelValue,
+  async (open) => {
+    isOpen.value = open;
+    if (open) {
+      await nextTick();
+      measureContent();
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => contentRef.value,
+  (el) => {
+    if (el && isOpen.value) {
+      measureContent();
+    }
+  }
+);
+
+watch(
+  () => [contentRef.value?.innerHTML, isOpen.value],
+  async () => {
+    if (isOpen.value) {
+      await nextTick();
+      measureContent();
+    }
+  }
+);
+
+onMounted(() => {
+  isOpen.value = Boolean(props.modelValue);
+});
+</script>

package/src/components/collapse/index.ts

@@ -0,0 +1,2 @@
+export { default as Collapse } from "./collapse.vue";
+export type { CollapseProps, CollapseEmit } from "./collapse.type";

package/src/components/container/container.html

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

package/src/components/container/container.md

@@ -0,0 +1,38 @@
+# `<t-container>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Base layout block (`layer` + `container`) wrapping page content.
+
+## Requirements / dependencies
+
+| Item  | Notes |
+| ----- | ----- |
+| Vue   | ^3.5  |
+| Other | None. |
+
+## Basic usage
+
+```vue
+<t-page>
+  <t-container>
+    <p>Content</p>
+  </t-container>
+</t-page>
+```
+
+## Props
+
+_No props._
+
+## Slots
+
+| Slot      | Description |
+| --------- | ----------- |
+| `default` | Content.    |
+
+## See also
+
+- Source: `src/components/container`

package/src/components/container/container.scss

@@ -0,0 +1,10 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$container: sass.fn-naming-prefix("container");
+
+.#{$container} {
+  width: 1200px;
+  max-width: 100%;
+  margin: 0 auto;
+}

package/src/components/container/container.vue

@@ -0,0 +1,9 @@
+<style lang="scss" src="./container.scss" scoped></style>
+<template src="./container.html"></template>
+<script lang="ts" setup>
+import { withPrefix } from "../../utils";
+
+const containerAttrs = {
+  class: [withPrefix("container")],
+} as const;
+</script>

package/src/components/container/index.ts

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

package/src/components/decision-modal/decision-modal.composable.ts

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