@toife/vue 3.0.6 → 3.1.2

package/src/components/layout/flex/flex.vue

@@ -0,0 +1,34 @@
+<style lang="scss" src="./flex.scss" scoped></style>
+<template src="./flex.html"></template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { withPrefix, property } from "../../../utils";
+import type { FlexProps } from "./flex.type";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<FlexProps>(), {
+  options: () => [],
+});
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const flexAttrs = computed(() => {
+  const style = props.options.map((option) => {
+    return {
+      [property(["flex", "gap", option?.breakpoint || ""])]:
+        typeof option.gap === "number" ? `${option.gap}px` : option.gap,
+      [property(["flex", "direction", option?.breakpoint || ""])]: option.direction,
+      [property(["flex", "wrap", option?.breakpoint || ""])]: option.wrap,
+      [property(["flex", "justify", option?.breakpoint || ""])]: option.justify,
+      [property(["flex", "align", option?.breakpoint || ""])]: option.align,
+      [property(["flex", "align-content", option?.breakpoint || ""])]: option.alignContent,
+    };
+  });
+
+  return {
+    class: [withPrefix("flex")],
+    style,
+  };
+});
+</script>

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

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

package/src/components/layout/grid/grid.html

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

package/src/components/layout/grid/grid.md

@@ -0,0 +1,50 @@
+# `<t-grid>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+CSS Grid wrapper with theme-based default gap. Use with `<t-grid-item>` for placement.
+
+## Requirements / dependencies
+
+| Item                | Notes                           |
+| ------------------- | ------------------------------- |
+| Vue                 | ^3.5                            |
+| `@toife/sass-layer` | Theme tokens for default `gap`. |
+
+## Basic usage
+
+```vue
+<t-grid :columns="3">
+  <t-grid-item>One</t-grid-item>
+  <t-grid-item>Two</t-grid-item>
+  <t-grid-item>Three</t-grid-item>
+</t-grid>
+```
+
+## Props
+
+| Prop             | Type               | Default | Description                                                     |
+| ---------------- | ------------------ | ------- | --------------------------------------------------------------- |
+| `columns`        | `number \| string` | `1`     | Column count (`repeat(n, 1fr)`) or raw `grid-template-columns`. |
+| `rows`           | `number \| string` | —       | `grid-template-rows`.                                           |
+| `gap`            | `string`           | —       | Sets `gap` (overrides SCSS default when non-empty).             |
+| `columnGap`      | `string`           | —       | `column-gap`.                                                   |
+| `rowGap`         | `string`           | —       | `row-gap`.                                                      |
+| `alignItems`     | `string`           | —       | `align-items`.                                                  |
+| `justifyItems`   | `string`           | —       | `justify-items`.                                                |
+| `alignContent`   | `string`           | —       | `align-content`.                                                |
+| `justifyContent` | `string`           | —       | `justify-content`.                                              |
+| `autoFlow`       | `string`           | —       | `grid-auto-flow`.                                               |
+
+## Slots
+
+| Slot      | Description |
+| --------- | ----------- |
+| `default` | Grid cells. |
+
+## See also
+
+- Source: `src/components/grid/grid`
+- `<t-grid-item>`

package/src/components/layout/grid/grid.scss

@@ -0,0 +1,53 @@
+@use "@toife/sass-layer" as sass;
+@use "sass:map";
+@use "sass:list";
+
+/// Class name
+$grid: sass.fn-naming-prefix("grid");
+
+/// Base tokens (breakpoint "")
+$grid-gap: sass.fn-naming-var("grid", "gap");
+$grid-columns: sass.fn-naming-var("grid", "columns");
+$grid-rows: sass.fn-naming-var("grid", "rows");
+$grid-auto-flow: sass.fn-naming-var("grid", "auto-flow");
+
+.#{$grid} {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 0;
+  gap: #{$grid-gap};
+  grid-template-columns: #{$grid-columns};
+  grid-template-rows: #{$grid-rows};
+  grid-auto-flow: #{$grid-auto-flow};
+
+  $bp-names: map.keys(sass.$breakpoints);
+  $bp-count: list.length($bp-names);
+
+  @for $i from 1 through $bp-count {
+    $bp-name: list.nth($bp-names, $i);
+    $bp-min: map.get(sass.$breakpoints, $bp-name);
+
+    @media (min-width: $bp-min) {
+      gap: #{sass.fn-naming-cascade-dvar(("grid", "gap"), $bp-names, $i, $grid-gap)};
+      grid-template-columns: #{sass.fn-naming-cascade-dvar(
+          ("grid", "columns"),
+          $bp-names,
+          $i,
+          $grid-columns
+        )};
+      grid-template-rows: #{sass.fn-naming-cascade-dvar(
+          ("grid", "rows"),
+          $bp-names,
+          $i,
+          $grid-rows
+        )};
+      grid-auto-flow: #{sass.fn-naming-cascade-dvar(
+          ("grid", "auto-flow"),
+          $bp-names,
+          $i,
+          $grid-auto-flow
+        )};
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+export type GridOption = {
+  breakpoint?: string;
+  gap?: string;
+  columns?: string;
+  rows?: string;
+  autoFlow?: string;
+};
+
+// Type definitions
+export type GridProps = {
+  options?: GridOption[];
+};

package/src/components/layout/grid/grid.vue

@@ -0,0 +1,32 @@
+<style lang="scss" src="./grid.scss" scoped></style>
+<template src="./grid.html"></template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { withPrefix, property } from "../../../utils";
+import type { GridProps } from "./grid.type";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<GridProps>(), {
+  options: () => [],
+});
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const gridAttrs = computed(() => {
+  const style = props.options.map((option) => {
+    return {
+      [property(["grid", "gap", option?.breakpoint || ""])]:
+        typeof option.gap === "number" ? `${option.gap}px` : option.gap,
+      [property(["grid", "columns", option?.breakpoint || ""])]: option.columns,
+      [property(["grid", "rows", option?.breakpoint || ""])]: option.rows,
+      [property(["grid", "auto-flow", option?.breakpoint || ""])]: option.autoFlow,
+    };
+  });
+
+  return {
+    class: [withPrefix("grid")],
+    style,
+  };
+});
+</script>

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

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

package/src/components/layout/index.ts

@@ -0,0 +1,3 @@
+export * from "./grid";
+export * from "./flex";
+export * from "./cell";

package/src/components/modal/modal.scss

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

package/src/components/page/page.scss

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

package/src/components/present/present.scss

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

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

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

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/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

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

package/src/components/select/select.html

@@ -0,0 +1,29 @@
+<div v-bind="selectAttrs">
+  <Dropdown v-bind="dropdownAttrs" v-model="visible">
+    <template #trigger="{ toggle, isOpen }">
+      <Field
+        :role="role"
+        variant="outline"
+        @click="toggle"
+        v-bind="fieldAttrs"
+        :class="{focus: isOpen}"
+      >
+        <template #end-input>
+          <span v-bind="selectIconAttrs" :class="{open: isOpen}"></span>
+        </template>
+      </Field>
+    </template>
+    <button
+      v-for="option in options"
+      :key="option.value"
+      type="button"
+      :disabled="option.disabled"
+      v-bind="selectOptionAttrs"
+      @click="pickOption(option)"
+    >
+      {{ 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

@@ -0,0 +1,129 @@
+@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;
+  }
+
+  .#{$select-icon} {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-inline-end: calc(#{$spacing-x} * #{$size-coefficient-x} * 0.5);
+    color: inherit;
+    pointer-events: none;
+    width: 0.6rem;
+    height: 0.6rem;
+    border-radius: 0.1rem;
+    border-right: 2px solid rgb(var(--t-app-color));
+    border-bottom: 2px solid rgb(var(--t-app-color));
+    margin: calc(var(--t-spacing-y) * var(--t-coefficient-y))
+      calc(var(--t-spacing-x) * var(--t-coefficient-x));
+    transition: transform #{$transition-duration} ease;
+    transform-origin: center;
+
+    &.open {
+      transform: rotate(225deg);
+    }
+
+    &:not(.open) {
+      transform: rotate(45deg);
+    }
+  }
+
+  .#{$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;
+  }
+
+  // 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

@@ -0,0 +1,45 @@
+import type { FieldSize, FieldVariant } from "../field";
+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;
+  name?: string;
+  variant?: FieldVariant;
+  role?: string;
+  shape?: string;
+  size?: FieldSize;
+  shadow?: boolean;
+  direction?: AppDirection;
+
+  // Input
+  id?: string;
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  autocomplete?: string;
+  tabindex?: number | string;
+  line?: number | string;
+  maxLine?: number | string;
+
+  // Support
+  message?: string;
+  help?: string;
+
+  // Data
+  options: Array<SelectOption>;
+};
+
+export type SelectEmit = {
+  (e: "update:modelValue", value: string): void;
+  (e: "select", option: SelectOption): void;
+};