@toife/vue 2.2.0 → 3.0.1

package/src/components/cable/cable.md

@@ -0,0 +1,57 @@
+# `<t-cable>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Layout region for dock-style UI; provides `placement` to descendants (e.g. `Toolbar`) via inject.
+
+## Requirements / dependencies
+
+| Item  | Notes                                                |
+| ----- | ---------------------------------------------------- |
+| Vue   | ^3.5                                                 |
+| Other | Toolbar is often placed inside to inherit placement. |
+
+## Basic usage
+
+```vue
+<t-cable placement="bottom">
+  <t-toolbar><t-button>Home</t-button></t-toolbar>
+</t-cable>
+```
+
+## Props
+
+| Prop        | Type      | Default    | Description                             |
+| ----------- | --------- | ---------- | --------------------------------------- |
+| `keyboard`  | `boolean` | `false`    | Reserved for keyboard-related behavior. |
+| `placement` | `string`  | `"bottom"` | Cable placement (class on root).        |
+
+**Type source:** `src/components/cable/cable.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+| Slot      | Description                    |
+| --------- | ------------------------------ |
+| `default` | Content (toolbar, buttons, …). |
+
+## Provide / inject
+
+`provide(CABLE_PROVIDER_STATE_KEY)`: `{ placement }` — `Toolbar` injects it for placement classes.
+
+## Expose
+
+Nothing.
+
+## Style / class notes
+
+Classes: `layer`, `base`, `cable`, plus placement.
+
+## See also
+
+- Source: `src/components/cable`

package/src/components/cable/cable.scss

@@ -0,0 +1,37 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$cable: sass.fn-naming-prefix("cable");
+
+.#{$cable} {
+  position: absolute;
+  z-index: 10;
+
+  &.bottom {
+    bottom: 0;
+    left: 0;
+    height: auto;
+    width: 100%;
+  }
+
+  &.top {
+    left: 0;
+    top: 0;
+    height: auto;
+    width: 100%;
+  }
+
+  &.left {
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: auto;
+  }
+
+  &.right {
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: auto;
+  }
+}

package/src/components/cable/cable.type.ts

@@ -0,0 +1,11 @@
+import type { Ref } from "vue";
+
+// Define
+export type CableProps = {
+  keyboard?: boolean;
+  placement?: string;
+};
+
+export type CableProviderState = {
+  placement: Ref<string>;
+};

package/src/components/cable/cable.vue

@@ -0,0 +1,33 @@
+<style lang="scss" src="./cable.scss" scoped></style>
+<template src="./cable.html"></template>
+<script lang="ts" setup>
+import { computed, provide, toRefs } from "vue";
+import { type CableProviderState, type CableProps } from "./cable.type";
+import { withPrefix } from "../../utils";
+import { CABLE_PROVIDER_STATE_KEY } from "./cable.constants";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<CableProps>(), {
+  keyboard: false,
+  placement: "bottom",
+});
+
+/// State
+/// ------------------------------------------------------------
+const { placement } = toRefs(props);
+
+/// Computed
+/// ------------------------------------------------------------
+const cableAttrs = computed(() => {
+  return {
+    class: [withPrefix(["layer", "cable"]), withPrefix("cable"), placement.value],
+  };
+});
+
+// Export, Expose
+/// ------------------------------------------------------------
+provide<CableProviderState>(CABLE_PROVIDER_STATE_KEY, {
+  placement,
+});
+</script>

package/src/components/cable/index.ts

@@ -0,0 +1,3 @@
+export { default as Cable } from "./cable.vue";
+export type { CableProps } from "./cable.type";
+export { CABLE_PROVIDER_STATE_KEY } from "./cable.constants";

package/src/components/card/card/card.constants.ts

@@ -0,0 +1 @@
+export const CARD_PROVIDER_STATE_KEY = "card-state";

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

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

package/src/components/card/card/card.md

@@ -0,0 +1,57 @@
+# `<t-card>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Card surface with optional divider; provides context for `CardHeader` / `CardBody` / `CardFooter`.
+
+## Requirements / dependencies
+
+| Item  | Notes                |
+| ----- | -------------------- |
+| Vue   | ^3.5                 |
+| Other | `t-app` recommended. |
+
+## Basic usage
+
+```vue
+<t-card>
+  <t-card-header>Title</t-card-header>
+  <t-card-body>Content</t-card-body>
+  <t-card-footer>Footer</t-card-footer>
+</t-card>
+```
+
+## Props
+
+| Prop      | Type      | Default | Description                         |
+| --------- | --------- | ------- | ----------------------------------- |
+| `role`    | `string`  | —       | Default from app.                   |
+| `shape`   | `string`  | —       | Default from app.                   |
+| `divider` | `boolean` | —       | Section dividers; default from app. |
+
+**Type source:** `src/components/card/card/card.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+| Slot      | Description       |
+| --------- | ----------------- |
+| `default` | Entire card body. |
+
+## Provide / inject
+
+`provide(CARD_PROVIDER_STATE_KEY)`: `{ role, shape, divider }` for header/footer.
+
+## Expose
+
+Nothing.
+
+## See also
+
+- Source: `src/components/card/card`
+- [card-header.md](../card-header/card-header.md), [card-body.md](../card-body/card-body.md), [card-footer.md](../card-footer/card-footer.md)

package/src/components/card/card/card.scss

@@ -0,0 +1,34 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$card: sass.fn-naming-prefix("card");
+
+// Property name - layer: card
+$background-color: sass.fn-naming-var("card", "background-color");
+$color: sass.fn-naming-var("card", "color");
+$border-radius: sass.fn-naming-var("border-radius");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$card} {
+  background-color: rgb(#{$background-color});
+  color: rgb(#{$color});
+  border-radius: #{$border-radius};
+  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;
+
+  > div {
+    &:first-child {
+      border-top-left-radius: #{$border-radius};
+      border-top-right-radius: #{$border-radius};
+    }
+
+    &:last-child {
+      border-bottom-left-radius: #{$border-radius};
+      border-bottom-right-radius: #{$border-radius};
+    }
+  }
+}

package/src/components/card/card/card.type.ts

@@ -0,0 +1,14 @@
+import { ComputedRef, Ref } from "vue";
+
+// Define
+export type CardProps = {
+  role?: string;
+  shape?: string;
+  divider?: boolean;
+};
+
+export type CardProviderState = {
+  role: ComputedRef<string>;
+  shape: ComputedRef<string>;
+  divider: ComputedRef<boolean>;
+};

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

@@ -0,0 +1,62 @@
+<style lang="scss" src="./card.scss"></style>
+<template src="./card.html"></template>
+<script lang="ts" setup>
+import { computed, inject, provide } from "vue";
+import { type CardProps, type CardProviderState } from "./card.type";
+import { withPrefix } from "../../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
+import { CARD_PROVIDER_STATE_KEY } from "./card.constants";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<CardProps>(), {
+  divider: undefined,
+  shape: undefined,
+  role: undefined,
+});
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// Computed
+/// ------------------------------------------------------------
+const divider = computed(() => {
+  return (props?.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
+});
+
+const shape = computed(() => {
+  return props?.shape || appState?.shape.value || "";
+});
+
+const role = computed(() => {
+  return props.role || appState?.role.value || "";
+});
+
+const cardAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix(["layer", "card"]),
+      withPrefix(["role", role.value]),
+      withPrefix(["shape", shape.value]),
+      withPrefix("card"),
+      {
+        divider: divider.value,
+      },
+    ],
+  };
+});
+
+const cardProviderState = computed(() => {
+  return {
+    role: props.role,
+    shape: shape.value,
+    divider: divider.value,
+  };
+});
+
+/// Export, Expose
+/// ------------------------------------------------------------
+provide<CardProviderState>(CARD_PROVIDER_STATE_KEY, {
+  role,
+  shape,
+  divider,
+});
+</script>

package/src/components/card/card/index.ts

@@ -0,0 +1,3 @@
+export { default as Card } from "./card.vue";
+export * from "./card.type";
+export { CARD_PROVIDER_STATE_KEY } from "./card.constants";

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

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

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

@@ -0,0 +1,34 @@
+# `<t-card-body>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Main content region of a card.
+
+## Requirements / dependencies
+
+| Item  | Notes                    |
+| ----- | ------------------------ |
+| Vue   | ^3.5                     |
+| Other | Usually inside `t-card`. |
+
+## Basic usage
+
+```vue
+<t-card-body>Main content</t-card-body>
+```
+
+## Props
+
+_None._
+
+## Slots
+
+| Slot      | Description |
+| --------- | ----------- |
+| `default` | Content.    |
+
+## See also
+
+- Source: `src/components/card/card-body`

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

@@ -0,0 +1,23 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$card-body: sass.fn-naming-prefix("card-body");
+
+// Property name - layer: card
+$background-color: sass.fn-naming-var("card", "background-color");
+$color: sass.fn-naming-var("card", "color");
+$padding-y: sass.fn-naming-var("spacing", "y");
+$padding-x: sass.fn-naming-var("spacing", "x");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$card-body} {
+  background-color: rgb(#{$background-color});
+  color: rgb(#{$color});
+  padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
+  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;
+}

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

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

package/src/components/card/card-body/index.ts

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

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

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

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

@@ -0,0 +1,42 @@
+# `<t-card-footer>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Card footer region; divider follows `t-card` context.
+
+## Requirements / dependencies
+
+| Item  | Notes                                         |
+| ----- | --------------------------------------------- |
+| Vue   | ^3.5                                          |
+| Other | Should be inside `t-card` for correct inject. |
+
+## Basic usage
+
+```vue
+<t-card>
+  <t-card-footer>
+    <t-button>OK</t-button>
+  </t-card-footer>
+</t-card>
+```
+
+## Props
+
+_None._
+
+## Slots
+
+| Slot      | Description     |
+| --------- | --------------- |
+| `default` | Footer content. |
+
+## Provide / inject
+
+Injects `CardProviderState` from `t-card`.
+
+## See also
+
+- Source: `src/components/card/card-footer`

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

@@ -0,0 +1,31 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$card-footer: sass.fn-naming-prefix("card-footer");
+
+// Property name - layer: card
+$background-color: sass.fn-naming-var("card", "background-color");
+$color: sass.fn-naming-var("card", "color");
+$padding-y: sass.fn-naming-var("spacing", "y");
+$padding-x: sass.fn-naming-var("spacing", "x");
+$border-color: sass.fn-naming-var("card", "border-color");
+$border-width: sass.fn-naming-var("stroke", "width");
+$border: #{$border-width} solid transparent;
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$card-footer} {
+  background-color: rgb(#{$background-color});
+  color: rgb(#{$color});
+  padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
+  border-top: #{$border};
+  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;
+
+  &.divider {
+    border-color: rgb(#{$border-color});
+  }
+}

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

@@ -0,0 +1,25 @@
+<style lang="scss" src="./card-footer.scss"></style>
+<template src="./card-footer.html"></template>
+<script lang="ts" setup>
+import { computed, inject } from "vue";
+import { withPrefix } from "../../../utils";
+import { type CardProviderState, CARD_PROVIDER_STATE_KEY } from "../card";
+
+/// Define
+/// ------------------------------------------------------------
+const cardProviderState = inject<CardProviderState>(CARD_PROVIDER_STATE_KEY);
+
+/// Computed
+/// ------------------------------------------------------------
+const cardFooterAttrs = computed(() => {
+  const divider = cardProviderState?.divider.value ?? false;
+  return {
+    class: [
+      withPrefix("card-footer"),
+      {
+        divider,
+      },
+    ],
+  };
+});
+</script>

package/src/components/card/card-footer/index.ts

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

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

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

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

@@ -0,0 +1,44 @@
+# `<t-card-header>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Card header region; divider follows context from `t-card`.
+
+## Requirements / dependencies
+
+| Item  | Notes                                                        |
+| ----- | ------------------------------------------------------------ |
+| Vue   | ^3.5                                                         |
+| Other | Must be inside `t-card` (injects `CARD_PROVIDER_STATE_KEY`). |
+
+## Basic usage
+
+```vue
+<t-card>
+  <t-card-header>Title</t-card-header>
+</t-card>
+```
+
+## Props
+
+_No own props._
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+| Slot      | Description     |
+| --------- | --------------- |
+| `default` | Header content. |
+
+## Provide / inject
+
+Injects `CardProviderState` from `t-card`.
+
+## See also
+
+- Source: `src/components/card/card-header`

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

@@ -0,0 +1,31 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$card-header: sass.fn-naming-prefix("card-header");
+
+// Property name - layer: card
+$background-color: sass.fn-naming-var("card", "background-color");
+$color: sass.fn-naming-var("card", "color");
+$padding-y: sass.fn-naming-var("spacing", "y");
+$padding-x: sass.fn-naming-var("spacing", "x");
+$border-color: sass.fn-naming-var("card", "border-color");
+$border-width: sass.fn-naming-var("stroke", "width");
+$border: #{$border-width} solid transparent;
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$card-header} {
+  background-color: rgb(#{$background-color});
+  color: rgb(#{$color});
+  padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
+  border-bottom: #{$border};
+  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;
+
+  &.divider {
+    border-color: rgb(#{$border-color});
+  }
+}

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

@@ -0,0 +1,25 @@
+<style lang="scss" src="./card-header.scss"></style>
+<template src="./card-header.html"></template>
+<script lang="ts" setup>
+import { computed, inject } from "vue";
+import { withPrefix } from "../../../utils";
+import { type CardProviderState, CARD_PROVIDER_STATE_KEY } from "../card";
+
+/// Define
+/// ------------------------------------------------------------
+const cardProviderState = inject<CardProviderState>(CARD_PROVIDER_STATE_KEY);
+
+/// Computed
+/// ------------------------------------------------------------
+const cardHeaderAttrs = computed(() => {
+  const divider = cardProviderState?.divider.value ?? false;
+  return {
+    class: [
+      withPrefix("card-header"),
+      {
+        divider,
+      },
+    ],
+  };
+});
+</script>

package/src/components/card/card-header/index.ts

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

package/src/components/card/index.ts

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

package/src/components/checkbox/checkbox.html

@@ -0,0 +1,13 @@
+<div
+  v-bind="checkboxAttrs"
+  :tabindex="disabled ? -1 : 0"
+  role="checkbox"
+  :aria-checked="props.modelValue"
+  @click="onCheckbox"
+  @focus="onFocus"
+  @blur="onBlur"
+  @keydown="onKeydown"
+>
+  <div v-bind="checkboxIconAttrs"></div>
+  <slot></slot>
+</div>