@toife/vue 2.2.0 → 3.0.1

package/src/components/radio/radio/radio.md

@@ -0,0 +1,53 @@
+# `<t-radio>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Single choice in a group — **must** be used inside `t-radio-group` so selection updates via inject.
+
+## Requirements / dependencies
+
+| Item  | Notes                            |
+| ----- | -------------------------------- |
+| Vue   | ^3.5                             |
+| Other | Parent `t-radio-group` required. |
+
+## Basic usage
+
+```vue
+<t-radio-group v-model="x">
+  <t-radio value="1">One</t-radio>
+</t-radio-group>
+```
+
+## Props
+
+| Prop       | Type               | Default      | Description               |
+| ---------- | ------------------ | ------------ | ------------------------- |
+| `value`    | `string \| number` | _(required)_ | Value when selected.      |
+| `role`     | `string`           | —            | Overrides group/app role. |
+| `variant`  | `RadioVariant`     | —            | Overrides group variant.  |
+| `disabled` | `boolean`          | `false`      | Or from group.            |
+| `readonly` | `boolean`          | `false`      | Or from group.            |
+| `shadow`   | `boolean`          | —            | Group/app default.        |
+
+**Type source:** `src/components/radio/radio/radio.type.ts`
+
+## Events (emits)
+
+_None_ — selection goes through the group’s `setValue`.
+
+## Slots
+
+| Slot      | Description |
+| --------- | ----------- |
+| `default` | Label.      |
+
+## Accessibility (a11y)
+
+`tabindex` 0/-1; Space/Enter selects. Consider `role="radiogroup"` on the container in your app if needed.
+
+## See also
+
+- Source: `src/components/radio/radio`

package/src/components/radio/radio/radio.scss

@@ -0,0 +1,125 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Classes
+$radio: sass.fn-naming-prefix("radio");
+$radio-icon: sass.fn-naming-prefix("radio-icon");
+
+// Properties - layer: item
+$background-color: sass.fn-naming-var("radio", "background-color");
+$background-color-hover: sass.fn-naming-var("radio", "background-color", "subtle");
+$background-color-inactive: sass.fn-naming-var("radio", "background-color", "soft");
+$background-color-contrast: sass.fn-naming-var("radio", "background-color", "contrast");
+$background-color-disabled: sass.fn-naming-var("radio", "background-color", "subtle");
+
+$border-color: sass.fn-naming-var("radio", "border-color");
+$border-color-inactive: sass.fn-naming-var("radio", "border-color", "subtle");
+
+$transition-duration: sass.fn-naming-var("motion", "duration");
+$border-radius: sass.fn-naming-var("border-radius");
+
+.#{$radio} {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  box-shadow: none !important;
+
+  .#{$radio-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: 50%;
+    box-sizing: border-box;
+
+    &::after {
+      content: "";
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      background-color: rgb(#{$background-color-contrast});
+      transform: scale(0);
+      transition:
+        transform #{$transition-duration} ease,
+        background-color #{$transition-duration} ease,
+        color #{$transition-duration} ease,
+        border-color #{$transition-duration} ease;
+    }
+  }
+
+  &:not(.on) {
+    .#{$radio-icon} {
+      background-color: transparent;
+      border-color: rgb(#{$border-color-inactive});
+    }
+
+    &:not(.disabled):not(.readonly):hover {
+      .#{$radio-icon} {
+        border-color: rgb(#{$border-color});
+        background-color: rgba(#{$background-color-hover}, 0.2);
+      }
+    }
+  }
+
+  &.on {
+    &.fill {
+      .#{$radio-icon} {
+        background-color: rgb(#{$background-color});
+        border-color: rgb(#{$background-color});
+
+        &::after {
+          transform: scale(1);
+        }
+      }
+    }
+
+    &.outline {
+      .#{$radio-icon} {
+        background-color: transparent;
+        border-color: rgb(#{$background-color});
+
+        &::after {
+          transform: scale(1.5);
+          background-color: rgb(#{$background-color});
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+
+    &.on {
+      .#{$radio-icon} {
+        background-color: rgb(#{$background-color-disabled});
+        border-color: rgb(#{$background-color-disabled});
+      }
+    }
+  }
+
+  &.readonly {
+    cursor: default;
+  }
+
+  &.focus {
+    &.shadow {
+      .#{$radio-icon} {
+        box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+      }
+    }
+  }
+}

package/src/components/radio/radio/radio.type.ts

@@ -0,0 +1,11 @@
+export type RadioVariant = "fill" | "outline";
+
+// Define
+export type RadioProps = {
+  value: string | number;
+  role?: string;
+  variant?: RadioVariant;
+  disabled?: boolean;
+  readonly?: boolean;
+  shadow?: boolean;
+};

package/src/components/radio/radio/radio.vue

@@ -0,0 +1,99 @@
+<style lang="scss" src="./radio.scss" scoped></style>
+<template src="./radio.html"></template>
+<script lang="ts" setup>
+import { computed, inject, ref } from "vue";
+import type { RadioProps } from "./radio.type";
+import { withPrefix } from "../../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
+import { type RadioGroupProviderState, RADIO_GROUP_PROVIDER_STATE_KEY } from "../radio-group";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<RadioProps>(), {
+  disabled: false,
+  shadow: undefined,
+});
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+const radioGroupState = inject<RadioGroupProviderState | null>(
+  RADIO_GROUP_PROVIDER_STATE_KEY,
+  null
+);
+
+/// State
+/// ------------------------------------------------------------
+const isFocused = ref(false);
+
+/// Computed
+/// ------------------------------------------------------------
+const role = computed(() => {
+  return props.role || radioGroupState?.role.value || appState?.role.value || "";
+});
+
+const variant = computed(() => {
+  return props.variant || radioGroupState?.variant.value || "";
+});
+
+const disabled = computed(() => {
+  return props.disabled || (radioGroupState?.disabled.value ?? false);
+});
+
+const readonly = computed(() => {
+  return props.readonly || (radioGroupState?.readonly.value ?? false);
+});
+
+const isChecked = computed(() => {
+  return radioGroupState?.modelValue.value === props.value;
+});
+
+const radioAttrs = computed(() => {
+  const shadow =
+    (props?.shadow !== undefined ? props.shadow : radioGroupState?.shadow.value) ?? false;
+  return {
+    class: [
+      withPrefix(["layer", "radio"]),
+      withPrefix([
+        "role",
+        (isChecked.value && !disabled.value
+          ? role.value || radioGroupState?.role.value
+          : appState?.role.value) ?? "",
+      ]),
+      withPrefix("radio"),
+      variant.value,
+      {
+        on: isChecked.value,
+        disabled: disabled.value,
+        readonly: readonly.value,
+        shadow,
+        focus: isFocused.value,
+      },
+    ],
+  };
+});
+
+const radioIconAttrs = {
+  class: [withPrefix("radio-icon")],
+} as const;
+
+/// Methods
+/// ------------------------------------------------------------
+const onRadio = () => {
+  if (disabled.value || readonly.value || !radioGroupState) return;
+  radioGroupState.setValue(props.value);
+};
+
+const onFocus = () => {
+  if (disabled.value || readonly.value) return;
+  isFocused.value = true;
+};
+
+const onBlur = () => {
+  if (disabled.value || readonly.value) return;
+  isFocused.value = false;
+};
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key !== " " && e.key !== "Enter") return;
+  e.preventDefault();
+  onRadio();
+};
+</script>

package/src/components/radio/radio-group/index.ts

@@ -0,0 +1,7 @@
+export { default as RadioGroup } from "./radio-group.vue";
+export type {
+  RadioGroupProps,
+  RadioGroupProviderState,
+  RadioGroupOrientation,
+} from "./radio-group.type";
+export { RADIO_GROUP_PROVIDER_STATE_KEY } from "./radio-group.constants";

package/src/components/radio/radio-group/radio-group.constants.ts

@@ -0,0 +1 @@
+export const RADIO_GROUP_PROVIDER_STATE_KEY = "radio-group-state";

package/src/components/radio/radio-group/radio-group.html

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

package/src/components/radio/radio-group/radio-group.md

@@ -0,0 +1,62 @@
+# `<t-radio-group>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Radio group with shared `v-model`; provides variant/readonly/disabled/shadow to child `t-radio` via provide/inject.
+
+## Requirements / dependencies
+
+| Item  | Notes                                |
+| ----- | ------------------------------------ |
+| Vue   | ^3.5                                 |
+| Other | Wrap one or more `t-radio` children. |
+
+## Basic usage
+
+```vue
+<t-radio-group v-model="choice" orientation="vertical">
+  <t-radio value="a">A</t-radio>
+  <t-radio value="b">B</t-radio>
+</t-radio-group>
+```
+
+## Props
+
+| Prop          | Type                         | Default      | Description                           |
+| ------------- | ---------------------------- | ------------ | ------------------------------------- |
+| `modelValue`  | `string \| number`           | —            | Selected value (`v-model`).           |
+| `role`        | `string`                     | —            | Theme; default from app.              |
+| `variant`     | `RadioVariant`               | `"fill"`     | Default for radios unless overridden. |
+| `disabled`    | `boolean`                    | `false`      | Whole group.                          |
+| `readonly`    | `boolean`                    | `false`      |                                       |
+| `shadow`      | `boolean`                    | —            | Default from app.                     |
+| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` | Flex layout.                          |
+
+**Type source:** `src/components/radio/radio-group/radio-group.type.ts`
+
+## Events (emits)
+
+| Event               | Payload            | Description                     |
+| ------------------- | ------------------ | ------------------------------- |
+| `update:modelValue` | `string \| number` | When a child radio is selected. |
+
+## Slots
+
+| Slot      | Description         |
+| --------- | ------------------- |
+| `default` | `t-radio` children. |
+
+## `v-model`
+
+`modelValue` / `update:modelValue`.
+
+## Provide / inject
+
+`RADIO_GROUP_PROVIDER_STATE_KEY`: `modelValue`, `role`, `variant`, `disabled`, `readonly`, `shadow`, `setValue`.
+
+## See also
+
+- Source: `src/components/radio/radio-group`
+- [radio.md](../radio/radio.md)

package/src/components/radio/radio-group/radio-group.scss

@@ -0,0 +1,16 @@
+@use "@toife/sass-layer-generator" as sass;
+
+$radio-group: sass.fn-naming-prefix("radio-group");
+
+.#{$radio-group} {
+  display: flex;
+  gap: 0.5rem;
+
+  &.horizontal {
+    flex-direction: row;
+  }
+
+  &.vertical {
+    flex-direction: column;
+  }
+}

package/src/components/radio/radio-group/radio-group.type.ts

@@ -0,0 +1,28 @@
+import type { ComputedRef } from "vue";
+import type { RadioVariant } from "../radio/radio.type";
+
+export type RadioGroupOrientation = "horizontal" | "vertical";
+
+export type RadioGroupProps = {
+  modelValue?: string | number;
+  role?: string;
+  variant?: RadioVariant;
+  disabled?: boolean;
+  readonly?: boolean;
+  shadow?: boolean;
+  orientation?: RadioGroupOrientation;
+};
+
+export type RadioGroupEmit = {
+  (e: "update:modelValue", value: string | number): void;
+};
+
+export type RadioGroupProviderState = {
+  modelValue: ComputedRef<string | number | undefined>;
+  role: ComputedRef<string>;
+  variant: ComputedRef<RadioVariant>;
+  disabled: ComputedRef<boolean>;
+  readonly: ComputedRef<boolean>;
+  setValue: (val: string | number) => void;
+  shadow: ComputedRef<boolean>;
+};

package/src/components/radio/radio-group/radio-group.vue

@@ -0,0 +1,57 @@
+<style lang="scss" src="./radio-group.scss" scoped></style>
+<template src="./radio-group.html"></template>
+<script lang="ts" setup>
+import { computed, inject, provide } from "vue";
+import type { RadioGroupProps, RadioGroupEmit, RadioGroupProviderState } from "./radio-group.type";
+import { withPrefix } from "../../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
+import { RADIO_GROUP_PROVIDER_STATE_KEY } from "./radio-group.constants";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<RadioGroupProps>(), {
+  disabled: false,
+  readonly: false,
+  variant: "fill",
+  orientation: "vertical",
+  shadow: undefined,
+});
+const emit = defineEmits<RadioGroupEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// Computed
+/// ------------------------------------------------------------
+const modelValue = computed(() => props.modelValue);
+
+const role = computed(() => {
+  return props.role || appState?.role.value || "";
+});
+
+const variant = computed(() => {
+  return props.variant;
+});
+
+const shadow = computed(() => {
+  return (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
+});
+
+const radioGroupAttrs = computed(() => {
+  return {
+    class: [withPrefix("radio-group"), props.orientation],
+  };
+});
+
+/// Provide
+/// ------------------------------------------------------------
+provide<RadioGroupProviderState>(RADIO_GROUP_PROVIDER_STATE_KEY, {
+  modelValue,
+  role,
+  variant,
+  disabled: computed(() => props.disabled),
+  readonly: computed(() => props.readonly),
+  shadow,
+  setValue: (val: string | number) => {
+    emit("update:modelValue", val);
+  },
+});
+</script>

package/src/components/refresher/index.ts

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

package/src/components/refresher/refresher.html

@@ -0,0 +1,6 @@
+<div v-bind="refresherAttrs" v-show="calculateOffset > 0">
+  <slot name="icon" :offset="calculateOffset" :refreshing="refreshing"></slot>
+</div>
+<div v-bind="containerAttrs" ref="container">
+  <slot></slot>
+</div>

package/src/components/refresher/refresher.md

@@ -0,0 +1,53 @@
+# `<t-refresher>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Pull-to-refresh using `@toife/gesture` on the scroll container; two variants control when refresh fires (`max` vs `up`).
+
+## Requirements / dependencies
+
+| Item  | Notes             |
+| ----- | ----------------- |
+| Vue   | ^3.5              |
+| Other | `@toife/gesture`. |
+
+## Basic usage
+
+```vue
+<t-refresher variant="up" :threshold="120" @refresh="(done) => load().finally(done)">
+  <template #icon="{ offset, refreshing }">…</template>
+  <div class="scroll-area">…</div>
+</t-refresher>
+```
+
+## Props
+
+| Prop        | Type            | Default | Description                                                                              |
+| ----------- | --------------- | ------- | ---------------------------------------------------------------------------------------- |
+| `threshold` | `number`        | `120`   | Pull threshold (px) depending on `variant`.                                              |
+| `variant`   | `"max" \| "up"` | `"max"` | `max`: fire during `move` when threshold reached; `up`: fire on `up` when threshold met. |
+| `offset`    | `number`        | —       | Override displayed offset (default `moveOffset / 2`).                                    |
+
+**Type source:** `src/components/refresher/refresher.type.ts`
+
+## Events (emits)
+
+| Event     | Payload             | Description                                       |
+| --------- | ------------------- | ------------------------------------------------- |
+| `refresh` | `close: () => void` | Call `close()` when refresh finishes to reset UI. |
+| `move`    | `offset: number`    | While pulling.                                    |
+| `cancel`  | —                   | Pull cancelled.                                   |
+| `start`   | —                   | Gesture started.                                  |
+
+## Slots
+
+| Slot      | Slot props               | Description                               |
+| --------- | ------------------------ | ----------------------------------------- |
+| `icon`    | `{ offset, refreshing }` | Indicator above the scroll area.          |
+| `default` | —                        | Scroll region (internal ref for gesture). |
+
+## See also
+
+- Source: `src/components/refresher`

package/src/components/refresher/refresher.scss

@@ -0,0 +1,36 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class
+$refresher: sass.fn-naming-prefix("refresher");
+$container: sass.fn-naming-prefix("refresher-container");
+
+// Variables
+$safe-area-top: sass.fn-naming-var("safe-area", "top");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+$offset: sass.fn-naming-var("refresher-offset");
+
+.#{$container} {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: auto;
+}
+
+// Refresher
+.#{$refresher} {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  transition: height #{$transition-duration} ease;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  line-height: 0;
+  z-index: 1;
+
+  &.moving {
+    top: calc(#{$safe-area-top} + #{$offset});
+  }
+}

package/src/components/refresher/refresher.type.ts

@@ -0,0 +1,16 @@
+// Props
+export type RefresherVariant = "max" | "up";
+
+// Define
+export type RefresherProps = {
+  threshold?: number;
+  variant?: RefresherVariant;
+  offset?: number;
+};
+
+export type RefresherEmit = {
+  (e: "refresh", close: () => void): void;
+  (e: "move", offset: number): void;
+  (e: "cancel"): void;
+  (e: "start"): void;
+};