@toife/vue 3.1.2 → 3.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toife/vue",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "A Frontend framework for Vue",
   "type": "module",
   "sideEffects": false,

package/src/components/action/action.html

@@ -7,7 +7,7 @@
 >
   <div v-bind="actionAttrs">
     <slot name="body">
-      <FormGroup orientation="vertical" v-for="(buttons, groupIndex) in actions" :key="groupIndex">
+      <FormGroup direction="vertical" v-for="(buttons, groupIndex) in actions" :key="groupIndex">
         <CustomButton
           v-for="(btn, btnIndex) in buttons"
           :key="`${groupIndex}-${btnIndex}`"

package/src/components/divider/divider.md

@@ -16,16 +16,16 @@ Horizontal or vertical divider line following theme.
 ## Basic usage
 
 ```vue
-<t-divider orientation="horizontal" />
-<t-divider orientation="vertical" />
+<t-divider direction="horizontal" />
+<t-divider direction="vertical" />
 ```
 
 ## Props
 
-| Prop          | Type                         | Default        | Description                     |
-| ------------- | ---------------------------- | -------------- | ------------------------------- |
-| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Divider direction.              |
-| `role`        | `string`                     | —              | Theme stroke; default from app. |
+| Prop        | Type                         | Default        | Description                     |
+| ----------- | ---------------------------- | -------------- | ------------------------------- |
+| `direction` | `"horizontal" \| "vertical"` | `"horizontal"` | Divider direction.              |
+| `role`      | `string`                     | —              | Theme stroke; default from app. |
 
 **Type source:** `src/components/divider/divider.type.ts`
 

package/src/components/divider/divider.type.ts

@@ -1,6 +1,6 @@
-export type DividerOrientation = "horizontal" | "vertical";
+export type DividerDirection = "horizontal" | "vertical";
 
 export type DividerProps = {
-  orientation?: DividerOrientation;
+  direction?: DividerDirection;
   role?: string;
 };

package/src/components/divider/divider.vue

@@ -9,7 +9,7 @@ import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 // Component setup (props, emits, injects)
 // ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<DividerProps>(), {
-  orientation: "horizontal",
+  direction: "horizontal",
 });
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
@@ -23,7 +23,7 @@ const dividerAttrs = computed(() => {
       withPrefix(["role", role]),
       withPrefix("divider"),
       {
-        [props.orientation]: true,
+        [props.direction]: true,
       },
     ],
   };

package/src/components/divider/index.ts

@@ -1,2 +1,2 @@
 export { default as Divider } from "./divider.vue";
-export type { DividerOrientation, DividerProps } from "./divider.type";
+export type { DividerDirection, DividerProps } from "./divider.type";

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

@@ -16,7 +16,7 @@ Groups controls in a horizontal or vertical flex layout; used by `Action` to sta
 ## Basic usage
 
 ```vue
-<t-form-group orientation="vertical">
+<t-form-group direction="vertical">
   <t-button>A</t-button>
   <t-button>B</t-button>
 </t-form-group>
@@ -24,9 +24,9 @@ Groups controls in a horizontal or vertical flex layout; used by `Action` to sta
 
 ## Props
 
-| Prop          | Type                         | Default        | Description  |
-| ------------- | ---------------------------- | -------------- | ------------ |
-| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout axis. |
+| Prop        | Type                         | Default        | Description  |
+| ----------- | ---------------------------- | -------------- | ------------ |
+| `direction` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout axis. |
 
 **Type source:** `src/components/form-group/form-group.type.ts`
 

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

@@ -1,5 +1,5 @@
-export type FormGroupOrientation = "horizontal" | "vertical";
+export type FormGroupDirection = "horizontal" | "vertical";
 
 export type FormGroupProps = {
-  orientation?: FormGroupOrientation;
+  direction?: FormGroupDirection;
 };

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

@@ -8,14 +8,14 @@ import { type FormGroupProps } from "./form-group.type";
 // Component setup (props, emits, injects)
 // ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<FormGroupProps>(), {
-  orientation: "horizontal",
+  direction: "horizontal",
 });
 
 // Computed properties
 // ----------------------------------------------------------------------------
 const formGroupAttrs = computed(() => {
   return {
-    class: [withPrefix("form-group"), props.orientation],
+    class: [withPrefix("form-group"), props.direction],
   };
 });
 </script>

package/src/components/layout/flex/flex.type.ts

@@ -1,7 +1,9 @@
+export type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
+
 export type FlexOption = {
   breakpoint?: string;
   gap?: string | number;
-  direction?: string;
+  direction?: FlexDirection;
   wrap?: string;
   justify?: string;
   align?: string;

package/src/components/layout/grid/grid.type.ts

@@ -1,6 +1,6 @@
 export type GridOption = {
   breakpoint?: string;
-  gap?: string;
+  gap?: string | number;
   columns?: string;
   rows?: string;
   autoFlow?: string;

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

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

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

@@ -16,7 +16,7 @@ Radio group with shared `v-model`; provides variant/readonly/disabled/shadow to
 ## Basic usage
 
 ```vue
-<t-radio-group v-model="choice" orientation="vertical">
+<t-radio-group v-model="choice" direction="vertical">
   <t-radio value="a">A</t-radio>
   <t-radio value="b">B</t-radio>
 </t-radio-group>
@@ -24,15 +24,15 @@ Radio group with shared `v-model`; provides variant/readonly/disabled/shadow to
 
 ## 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.                          |
+| 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.                     |
+| `direction`  | `"horizontal" \| "vertical"` | `"vertical"` | Flex layout.                          |
 
 **Type source:** `src/components/radio/radio-group/radio-group.type.ts`
 

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

@@ -1,7 +1,7 @@
 import type { ComputedRef } from "vue";
 import type { RadioVariant } from "../radio/radio.type";
 
-export type RadioGroupOrientation = "horizontal" | "vertical";
+export type RadioGroupDirection = "horizontal" | "vertical";
 
 export type RadioGroupProps = {
   modelValue?: string | number;
@@ -10,7 +10,7 @@ export type RadioGroupProps = {
   disabled?: boolean;
   readonly?: boolean;
   shadow?: boolean;
-  orientation?: RadioGroupOrientation;
+  direction?: RadioGroupDirection;
 };
 
 export type RadioGroupEmit = {

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

@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<RadioGroupProps>(), {
   disabled: false,
   readonly: false,
   variant: "fill",
-  orientation: "vertical",
+  direction: "vertical",
   shadow: undefined,
 });
 const emit = defineEmits<RadioGroupEmit>();
@@ -37,7 +37,7 @@ const shadow = computed(() => {
 
 const radioGroupAttrs = computed(() => {
   return {
-    class: [withPrefix("radio-group"), props.orientation],
+    class: [withPrefix("radio-group"), props.direction],
   };
 });
 

package/src/components/toolbar/toolbar.html

@@ -1,5 +1,3 @@
 <div v-bind="toolbarAttrs">
-  <div>
-    <slot />
-  </div>
+  <slot />
 </div>

package/src/components/toolbar/toolbar.md

@@ -25,12 +25,11 @@ Toolbar surface with height / safe-area; `placement` comes from props or from `t
 
 ## Props
 
-| Prop        | Type               | Default  | Description                                       |
-| ----------- | ------------------ | -------- | ------------------------------------------------- |
-| `placement` | `string \| null`   | `null`   | Placement class; if null, uses `cable.placement`. |
-| `safeArea`  | `boolean`          | `true`   | Safe-area padding (notch, home indicator).        |
-| `size`      | `string \| number` | `"50px"` | Toolbar height.                                   |
-| `role`      | `string`           | —        | Theme.                                            |
+| Prop        | Type             | Default | Description                                       |
+| ----------- | ---------------- | ------- | ------------------------------------------------- |
+| `placement` | `string \| null` | `null`  | Placement class; if null, uses `cable.placement`. |
+| `safeArea`  | `boolean`        | `true`  | Safe-area padding (notch, home indicator).        |
+| `role`      | `string`         | —       | Theme.                                            |
 
 **Type source:** `src/components/toolbar/toolbar.type.ts`
 
@@ -50,8 +49,6 @@ Optional inject `CABLE_PROVIDER_STATE_KEY` and `APP_PROVIDER_STATE_KEY`.
 
 ## Style / class notes
 
-Variable `--<prefix>-toolbar-size`; classes `with-safe-area`, placement.
-
 ## See also
 
 - Source: `src/components/toolbar`

package/src/components/toolbar/toolbar.scss

@@ -4,16 +4,21 @@
 $toolbar: sass.fn-naming-prefix("toolbar");
 
 // Property name - layer: toolbar
-$toolbar-size: sass.fn-naming-var("toolbar", "size");
 $toolbar-background-color: sass.fn-naming-var("toolbar", "background-color");
+$toolbar-color: sass.fn-naming-var("toolbar", "color");
+$toolbar-border-color: sass.fn-naming-var("toolbar", "border-color");
 $safe-area-right: sass.fn-naming-var("safe-area", "right");
 $safe-area-left: sass.fn-naming-var("safe-area", "left");
 $safe-area-bottom: sass.fn-naming-var("safe-area", "bottom");
 $safe-area-top: sass.fn-naming-var("safe-area", "top");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
+$border-width: sass.fn-naming-var("stroke", "width");
+$border: #{$border-width} solid rgb(#{$toolbar-border-color});
+
 .#{$toolbar} {
   background-color: rgb(#{$toolbar-background-color});
+  color: rgb(#{$toolbar-color});
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,
@@ -21,44 +26,6 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     color #{$transition-duration} ease,
     border-radius #{$transition-duration} ease;
 
-  > div {
-    align-items: center;
-    display: flex;
-    position: relative;
-
-    > * {
-      flex: 1;
-    }
-  }
-
-  &.bottom,
-  &.top {
-    > div {
-      flex-direction: row;
-      height: #{$toolbar-size};
-      max-height: #{$toolbar-size};
-      width: 100%;
-
-      > * {
-        height: 100%;
-      }
-    }
-  }
-
-  &.left,
-  &.right {
-    > div {
-      flex-direction: column;
-      width: #{$toolbar-size};
-      max-width: #{$toolbar-size};
-      height: 100%;
-
-      > * {
-        width: 100%;
-      }
-    }
-  }
-
   &.with-safe-area {
     &.right {
       padding-right: #{$safe-area-right};
@@ -76,4 +43,22 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
       padding-top: #{$safe-area-top};
     }
   }
+
+  &.divider {
+    &.bottom {
+      border-top: #{$border};
+    }
+
+    &.top {
+      border-bottom: #{$border};
+    }
+
+    &.left {
+      border-right: #{$border};
+    }
+
+    &.right {
+      border-left: #{$border};
+    }
+  }
 }

package/src/components/toolbar/toolbar.type.ts

@@ -2,6 +2,6 @@
 export type ToolbarProps = {
   placement?: string | null;
   safeArea?: boolean;
-  size?: string | number;
   role?: string;
+  divider?: boolean;
 };

package/src/components/toolbar/toolbar.vue

@@ -13,7 +13,7 @@ import { CABLE_PROVIDER_STATE_KEY } from "../cable";
 const props = withDefaults(defineProps<ToolbarProps>(), {
   placement: null,
   safeArea: true,
-  size: "50px",
+  divider: undefined,
 });
 const cable = inject<CableProviderState>(CABLE_PROVIDER_STATE_KEY);
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
@@ -23,6 +23,8 @@ const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 const toolbarAttrs = computed(() => {
   const role = props.role || appState?.role.value || "";
   const placement = props.placement || cable?.placement.value || "";
+  const divider = (props?.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
+
   return {
     class: [
       withPrefix(["layer", "toolbar"]),
@@ -31,11 +33,9 @@ const toolbarAttrs = computed(() => {
       placement,
       {
         "with-safe-area": props.safeArea,
+        divider: divider.value,
       },
     ],
-    style: {
-      [property(["toolbar", "size"])]: props.size + (typeof props.size === "number" ? "px" : ""),
-    },
   };
 });
 </script>