@toife/vue 3.0.7 → 3.1.3

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.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 $radio-group: sass.fn-naming-prefix("radio-group");
 

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/refresher/refresher.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class
 $refresher: sass.fn-naming-prefix("refresher");

package/src/components/route/route-navigator/route-navigator.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Classes
 $navigator: sass.fn-naming-prefix("route-navigator");
@@ -108,19 +108,19 @@ $backdrop-background-color: sass.fn-naming-var("backdrop", "background-color");
 
     &.back {
       &.right {
-        transform: translateX(calc(-1 * #{$transform-back}));
+        transform: translateX(#{$transform-back});
       }
 
       &.left {
-        transform: translateX(#{$transform-back});
+        transform: translateX(calc(-1 * #{$transform-back}));
       }
 
       &.up {
-        transform: translateY(#{$transform-back});
+        transform: translateY(calc(-1 * #{$transform-back}));
       }
 
       &.down {
-        transform: translateY(calc(-1 * #{$transform-back}));
+        transform: translateY(#{$transform-back});
       }
     }
   }

package/src/components/route/route-navigator/route-navigator.vue

@@ -26,7 +26,7 @@ import { clone } from "../route.util";
 // Active uses 0–100%; back uses (peek)*(100−percent)/100, so a peek of 40 makes the
 // back layer move 2.5× slower than the active layer (parallax). Use 100 for 1:1 motion
 // (no edge peek at rest: back starts at -100%).
-const BACK_LAYER_PEEK_PCT = 40;
+const BACK_LAYER_PEEK_PCT = -40;
 
 const props = withDefaults(defineProps<RouteNavigatorProps>(), {
   direction: "right",
@@ -134,17 +134,23 @@ const changeRoute = (value: RouteStack[]) => {
     transform.backdrop = 0;
     emit("transform", transform);
 
-    setTimeout(() => {
-      backdropIndex.value = backdropIndex.value + 1;
-      transform.duration = undefined;
-      emit("transform", transform);
-    }, 10);
-
-    setTimeout(() => {
-      transform.backdrop = 100;
-      activeIndex.value = stack.value.length - 1;
-      emit("transform", transform);
-    }, 100);
+    setTimeout(
+      () => {
+        backdropIndex.value = backdropIndex.value + 1;
+        transform.duration = undefined;
+        emit("transform", transform);
+      },
+      props.variant === "swipe" ? 10 : 0
+    );
+
+    setTimeout(
+      () => {
+        transform.backdrop = 100;
+        activeIndex.value = stack.value.length - 1;
+        emit("transform", transform);
+      },
+      props.variant === "swipe" ? 100 : 0
+    );
   }
 };
 
@@ -159,23 +165,24 @@ const resetTransform = () => {
   transform.back = BACK_LAYER_PEEK_PCT;
   transform.prepare = 100;
   transform.active = 0;
-
+  transform.duration = undefined;
   emit("transform", transform);
 };
 
 const move = (data: RouteNavigatorGesture) => {
   const width = navigatorRef.value?.offsetWidth ?? 0;
-  let percent = 0;
+  let activePercent = 0;
 
   if (props.direction == "left" || props.direction == "right") {
-    percent = (Math.abs(data.deltaX) / width) * 100;
+    activePercent = (Math.abs(data.deltaX) / width) * 100;
   } else {
-    percent = (Math.abs(data.deltaY) / width) * 100;
+    activePercent = (Math.abs(data.deltaY) / width) * 100;
   }
 
-  transform.back = ((100 - percent) * BACK_LAYER_PEEK_PCT) / 100;
-  transform.active = percent;
+  transform.back = ((100 - activePercent) * BACK_LAYER_PEEK_PCT) / 100;
+  transform.active = activePercent;
   transform.backdrop = 100 - transform.active;
+  transform.duration = "0s";
 
   emit("transform", transform);
 };
@@ -216,14 +223,13 @@ onMounted(() => {
       beforeEvent(e: Event) {
         const target = e.target as HTMLElement | null;
         const isEditable = target?.closest("input, textarea, select, button, [contenteditable]");
-        if (isEditable || props.variant === "none") return false;
+        if (isEditable || props.variant === "none" || !prevPage.value) return false;
         e.stopPropagation();
         return prevPage.value;
       },
 
       fast({ initialDirection, event }: { initialDirection: string; event: Event }) {
         if (initialDirection !== props.direction) return;
-        event.stopPropagation();
         event.preventDefault();
         goBack();
       },

package/src/components/segmented-field/segmented-field.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $segmented-field-wrapper: sass.fn-naming-prefix("segmented-field-wrapper");

package/src/components/select/index.ts

@@ -1,2 +1,2 @@
 export { default as Select } from "./select.vue";
-export type { SelectVariant, SelectSize, SelectProps } from "./select.type";
+export * from "./select.type";

package/src/components/select/select.html

@@ -1,5 +1,5 @@
 <div v-bind="selectAttrs">
-  <Dropdown v-bind="dropdownAttrs">
+  <Dropdown v-bind="dropdownAttrs" v-model="visible">
     <template #trigger="{ toggle, isOpen }">
       <Field
         :role="role"
@@ -14,13 +14,16 @@
       </Field>
     </template>
     <button
-      v-for="item in menuItems"
-      :key="item"
+      v-for="option in options"
+      :key="option.value"
       type="button"
-      class="dropdown-demo-row"
-      @click="pickMenu(item)"
+      :disabled="option.disabled"
+      v-bind="selectOptionAttrs"
+      @click="pickOption(option)"
     >
-      {{ item }}
+      {{ option.label }}
     </button>
   </Dropdown>
+  <div v-bind="selectMessageAttrs" v-if="message">{{ message }}</div>
+  <div v-bind="selectHelpAttrs" v-if="help">{{ help }}</div>
 </div>

package/src/components/select/select.scss

@@ -1,26 +1,36 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $select: sass.fn-naming-prefix("select");
 $select-icon: sass.fn-naming-prefix("select-icon");
+$select-option: sass.fn-naming-prefix("select-option");
+$select-message: sass.fn-naming-prefix("select-message");
+$select-help: sass.fn-naming-prefix("select-help");
 $field: sass.fn-naming-prefix("field");
 $field-input: sass.fn-naming-prefix("field-input");
 
 // Property name
 $app-color: sass.fn-naming-var("app", "color");
 $spacing-x: sass.fn-naming-var("spacing", "x");
+$spacing-y: sass.fn-naming-var("spacing", "y");
 $size-coefficient-x: sass.fn-naming-var("coefficient-x");
+$size-coefficient-y: sass.fn-naming-var("coefficient-y");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
+$select-background-color: sass.fn-naming-var("select", "background-color");
+$select-background-color-hover: sass.fn-naming-var("select", "background-color", "hover");
+$select-background-color-focus: sass.fn-naming-var("select", "background-color", "focus");
+$select-background-color-active: sass.fn-naming-var("select", "background-color", "active");
+$select-color: sass.fn-naming-var("select", "color");
+$select-color-disabled: sass.fn-naming-var("select", "color", "disabled");
+$select-border-color: sass.fn-naming-var("select", "border-color");
+$select-message-color: sass.fn-naming-var("select", "message-color");
+
 .#{$select} {
   &.disabled {
     cursor: not-allowed;
   }
 
-  &.readonly {
-    pointer-events: none;
-  }
-
   .#{$select-icon} {
     display: inline-flex;
     align-items: center;
@@ -48,11 +58,72 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     }
   }
 
-  // :deep(.#{$field}.focus .#{$select-icon} svg) {
-  //   transform: rotate(180deg);
-  // }
+  .#{$select-option} {
+    display: block;
+    width: 100%;
+    padding: calc(var(--t-spacing-y)) calc(var(--t-spacing-x) * var(--t-coefficient-x));
+    text-align: var(--t-text-align);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    background: transparent;
+    cursor: pointer;
+    color: rgb(#{$select-color});
+    background-color: rgb(#{$select-background-color});
+    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;
+
+    &:not(:disabled):not(.disabled):not(.readonly) {
+      &:hover,
+      &.hover {
+        background: rgb(#{$select-background-color-hover});
+      }
+
+      &:focus,
+      &.focus {
+        background: rgb(#{$select-background-color-focus});
+      }
+
+      &:active,
+      &.active {
+        background: rgb(#{$select-background-color-active});
+      }
+    }
+
+    &:disabled,
+    &.disabled {
+      cursor: not-allowed;
+      color: rgb(#{$select-color-disabled});
+    }
+  }
+
+  // Message
+  .#{$select-message} {
+    color: rgb(#{$select-message-color});
+    font-size: 0.9em;
+    line-height: 1.5;
+    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;
+  }
 
-  // :deep(.#{$field-input}) {
-  //   cursor: pointer;
-  // }
+  // Help
+  .#{$select-help} {
+    color: rgb(#{$app-color}, 0.75);
+    font-size: 0.8em;
+    line-height: 1.5;
+    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/select/select.type.ts

@@ -4,6 +4,12 @@ import type { AppDirection } from "../app";
 export type SelectVariant = FieldVariant;
 export type SelectSize = FieldSize;
 
+export type SelectOption = {
+  label?: string;
+  value: string;
+  disabled?: boolean;
+};
+
 export type SelectProps = {
   // Wrapper
   modelValue?: string;
@@ -20,7 +26,6 @@ export type SelectProps = {
   value?: string;
   placeholder?: string;
   disabled?: boolean;
-  readonly?: boolean;
   autocomplete?: string;
   tabindex?: number | string;
   line?: number | string;
@@ -29,4 +34,12 @@ export type SelectProps = {
   // Support
   message?: string;
   help?: string;
+
+  // Data
+  options: Array<SelectOption>;
+};
+
+export type SelectEmit = {
+  (e: "update:modelValue", value: string): void;
+  (e: "select", option: SelectOption): void;
 };

package/src/components/select/select.vue

@@ -1,8 +1,8 @@
 <style lang="scss" src="./select.scss" scoped></style>
 <template src="./select.html"></template>
 <script lang="ts" setup>
-import { computed, inject } from "vue";
-import { type SelectProps } from "./select.type";
+import { computed, inject, ref } from "vue";
+import { type SelectOption, type SelectProps, type SelectEmit } from "./select.type";
 import { property, withPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 import { Field } from "../field";
@@ -15,15 +15,17 @@ const props = withDefaults(defineProps<SelectProps>(), {
   type: "text",
   size: "standard",
   disabled: false,
-  readonly: false,
   message: "",
   help: "",
   variant: "outline",
   placeholder: "",
   shadow: undefined,
   direction: undefined,
+  options: () => [] as Array<SelectOption>,
 });
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+const emit = defineEmits<SelectEmit>();
+const visible = ref(false);
 
 // Computed properties
 // ----------------------------------------------------------------------------
@@ -47,10 +49,12 @@ const selectAttrs = computed(() => {
   return {
     class: [
       withPrefix(["layer", "select"]),
+      withPrefix(["role", role.value]),
       withPrefix("select"),
+      withPrefix(["direction", direction.value]),
+      withPrefix(["size", props.size]),
       {
         disabled: props.disabled,
-        readonly: props.readonly,
       },
     ],
   };
@@ -63,22 +67,27 @@ const dropdownAttrs = computed(() => {
     shadow: shadow.value,
     shape: shape.value,
     disabled: props.disabled,
-    readonly: props.readonly,
   };
 });
 
 const fieldAttrs = computed(() => {
+  const propsValue = props.modelValue || props.value;
+  let val: string[] = [];
+  if (propsValue) val = typeof propsValue === "string" ? [propsValue] : (propsValue as string[]);
+  const values: string[] = props.options
+    .filter((option): option is SelectOption => (val || []).includes(option.value))
+    .map((option) => option.label ?? option.value);
+
   return {
-    modelValue: props.modelValue,
+    modelValue: values.join(","),
     size: props.size,
-    message: props.message,
-    help: props.help,
     variant: props.variant,
     placeholder: props.placeholder,
     direction: direction.value,
     role: role.value,
     shape: shape.value,
     readonly: true,
+    disabled: props.disabled,
     shadow: shadow.value,
   };
 });
@@ -86,4 +95,25 @@ const fieldAttrs = computed(() => {
 const selectIconAttrs = computed(() => ({
   class: [withPrefix("select-icon")],
 }));
+
+const selectOptionAttrs = computed(() => ({
+  class: [withPrefix("select-option")],
+}));
+
+const selectMessageAttrs = computed(() => ({
+  class: [withPrefix("select-message")],
+}));
+
+const selectHelpAttrs = computed(() => ({
+  class: [withPrefix("select-help")],
+}));
+
+// Methods
+// ----------------------------------------------------------------------------
+const pickOption = (option: SelectOption) => {
+  if (option.disabled || option.value === undefined) return;
+  emit("update:modelValue", option.value);
+  emit("select", option);
+  visible.value = false;
+};
 </script>

package/src/components/skeleton/skeleton.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Classes
 $skeleton: sass.fn-naming-prefix("skeleton");

package/src/components/switch/switch.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Classes
 $switch: sass.fn-naming-prefix("switch");

package/src/components/tabs/tabs/tabs.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $tabs: sass.fn-naming-prefix("tabs");
@@ -30,7 +30,7 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
   position: relative;
   margin: 0;
   list-style: none;
-  border: #{$border-width} solid transparent;
+  border: none;
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,
@@ -113,25 +113,25 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     &.top-start,
     &.top-center,
     &.top-end {
-      border-bottom-color: rgb(#{$tabs-border-color});
+      border-bottom: #{$border-width} solid rgb(#{$tabs-border-color});
     }
 
     &.bottom-start,
     &.bottom-center,
     &.bottom-end {
-      border-top-color: rgb(#{$tabs-border-color});
+      border-top: #{$border-width} solid rgb(#{$tabs-border-color});
     }
 
     &.left-start,
     &.left-center,
     &.left-end {
-      border-right-color: rgb(#{$tabs-border-color});
+      border-right: #{$border-width} solid rgb(#{$tabs-border-color});
     }
 
     &.right-start,
     &.right-center,
     &.right-end {
-      border-left-color: rgb(#{$tabs-border-color});
+      border-left: #{$border-width} solid rgb(#{$tabs-border-color});
     }
   }
 

package/src/components/toast/toast/toast.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $toast: sass.fn-naming-prefix("toast");

package/src/components/toast/toast-content/toast-content.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $toastContent: sass.fn-naming-prefix("toast-content");

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`