@toife/vue 3.1.5 → 3.2.0

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

@@ -1,91 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Classes
-$form-group: sass.fn-naming-prefix("form-group");
-$button: sass.fn-naming-prefix("button");
-$field: sass.fn-naming-prefix("field");
-$field-content: sass.fn-naming-prefix("field-content");
-
-.#{$form-group} {
-  display: flex;
-
-  > :deep(*) {
-    flex: 1;
-
-    &.focus {
-      z-index: 2;
-    }
-  }
-
-  &.horizontal {
-    flex-direction: row;
-
-    :deep(.#{$button}) {
-      &:not(:last-child):not(:first-child) {
-        border-radius: 0;
-      }
-
-      &:first-child:not(:last-child) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      &:last-child:not(:first-child) {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-
-    :deep(.#{$field}) {
-      &:not(:last-child):not(:first-child) .#{$field-content} {
-        border-radius: 0;
-      }
-
-      &:first-child:not(:last-child) .#{$field-content} {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      &:last-child:not(:first-child) .#{$field-content} {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-  }
-
-  &.vertical {
-    flex-direction: column;
-
-    :deep(.#{$button}) {
-      &:not(:last-child):not(:first-child) {
-        border-radius: 0;
-      }
-
-      &:first-child:not(:last-child) {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      &:last-child:not(:first-child) {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-    }
-
-    :deep(.#{$field}) {
-      &:not(:last-child):not(:first-child) .#{$field-content} {
-        border-radius: 0;
-      }
-
-      &:first-child:not(:last-child) .#{$field-content} {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      &:last-child:not(:first-child) .#{$field-content} {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-    }
-  }
-}

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

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

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

@@ -1,21 +0,0 @@
-<style lang="scss" src="./form-group.scss" scoped></style>
-<template src="./form-group.html"></template>
-<script lang="ts" setup>
-import { cssPrefix } from "../../utils";
-import { computed } from "vue";
-import { type FormGroupProps } from "./form-group.type";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<FormGroupProps>(), {
-  direction: "horizontal",
-});
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const formGroupAttrs = computed(() => {
-  return {
-    class: [cssPrefix("form-group"), props.direction],
-  };
-});
-</script>

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

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

package/src/components/gesture-indicator/gesture-indicator.html

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

package/src/components/gesture-indicator/gesture-indicator.scss

@@ -1,47 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$gesture-indicator: sass.fn-naming-prefix("gesture-indicator");
-
-// Property name - layer: gesture-indicator
-$gesture-indicator-border-color: sass.fn-naming-var("gesture-indicator", "border-color");
-$radius-ratio: sass.fn-naming-var("radius-ratio");
-$radius-size: sass.fn-naming-var("radius-size");
-$transition-duration: sass.fn-naming-var("motion", "duration");
-
-.#{$gesture-indicator} {
-  background-color: rgba(#{$gesture-indicator-border-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;
-  position: absolute;
-  border-radius: calc(min(40px, #{$radius-size}) * #{$radius-ratio});
-  z-index: 99;
-
-  &.bottom {
-    width: 40px;
-    height: 4px;
-    top: 5px;
-  }
-
-  &.top {
-    width: 40px;
-    height: 4px;
-    bottom: 5px;
-  }
-
-  &.left {
-    height: 40px;
-    width: 4px;
-    right: 5px;
-  }
-
-  &.right {
-    height: 40px;
-    width: 4px;
-    left: 5px;
-  }
-}

package/src/components/gesture-indicator/gesture-indicator.type.ts

@@ -1,5 +0,0 @@
-// Type definitions
-export type GestureIndicatorProps = {
-  placement?: string;
-  role?: string;
-};

package/src/components/gesture-indicator/gesture-indicator.vue

@@ -1,31 +0,0 @@
-<style lang="scss" src="./gesture-indicator.scss" scoped></style>
-<template src="./gesture-indicator.html"></template>
-<script lang="ts" setup>
-import { cssPrefix } from "../../utils";
-import { type GestureIndicatorProps } from "./gesture-indicator.type";
-import { computed, inject } from "vue";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<GestureIndicatorProps>(), {
-  placement: "bottom",
-  role: undefined,
-});
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const gestureIndicatorAttrs = computed(() => {
-  const role = props.role || appState?.role.value || "";
-
-  return {
-    class: [
-      cssPrefix(["layer", "gesture-indicator"]),
-      cssPrefix(["role", role]),
-      cssPrefix("gesture-indicator"),
-      props.placement,
-    ],
-  };
-});
-</script>

package/src/components/gesture-indicator/index.ts

@@ -1 +0,0 @@
-export { default as GestureIndicator } from "./gesture-indicator.vue";

package/src/components/image/image.html

@@ -1 +0,0 @@
-<img @error="handleError" :src="dataSrc" />

package/src/components/image/image.type.ts

@@ -1,5 +0,0 @@
-// Type definitions
-export type ImageProps = {
-  defaultSrc?: string;
-  src?: string;
-};

package/src/components/image/image.vue

@@ -1,29 +0,0 @@
-<template src="./image.html"></template>
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import { type ImageProps } from "./image.type";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = defineProps<ImageProps>();
-
-// Reactive state
-// ----------------------------------------------------------------------------
-// Initialize from src to avoid an empty src flash before mount
-const dataSrc = ref<string>(props.src ?? "");
-
-// Methods
-// ----------------------------------------------------------------------------
-const handleError = () => {
-  if (props.defaultSrc) {
-    dataSrc.value = props.defaultSrc;
-  }
-};
-
-watch(
-  () => props.src,
-  (newVal) => {
-    dataSrc.value = newVal ?? "";
-  }
-);
-</script>

package/src/components/image/index.ts

@@ -1,2 +0,0 @@
-export { default as Image } from "./image.vue";
-export type { ImageProps } from "./image.type";

package/src/components/index.ts

@@ -1,31 +0,0 @@
-export * from "./app";
-export * from "./present";
-export * from "./modal";
-export * from "./gesture-indicator";
-export * from "./layout";
-export * from "./button";
-export * from "./cable";
-export * from "./toolbar";
-export * from "./skeleton";
-export * from "./tabs";
-export * from "./switch";
-export * from "./checkbox";
-export * from "./radio";
-export * from "./card";
-export * from "./toast";
-export * from "./avatar";
-export * from "./divider";
-export * from "./image";
-export * from "./action";
-export * from "./decision-modal";
-export * from "./field";
-export * from "./segmented-field";
-export * from "./container";
-export * from "./refresher";
-export * from "./route";
-export * from "./page";
-export * from "./collapse";
-export * from "./form-group";
-export * from "./dropdown";
-export * from "./select";
-export * from "./slide-range";

package/src/components/layout/flex/flex.html

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

package/src/components/layout/flex/flex.scss

@@ -1,57 +0,0 @@
-@use "@toife/sass-layer" as sass;
-@use "sass:map";
-@use "sass:list";
-
-/// Class name
-$flex: sass.fn-naming-prefix("flex");
-
-/// Base tokens (breakpoint "")
-$flex-gap: sass.fn-naming-var("flex", "gap");
-$flex-direction: sass.fn-naming-var("flex", "direction");
-$flex-wrap: sass.fn-naming-var("flex", "wrap");
-$flex-justify: sass.fn-naming-var("flex", "justify");
-$flex-align: sass.fn-naming-var("flex", "align");
-$flex-align-content: sass.fn-naming-var("flex", "align-content");
-
-.#{$flex} {
-  display: flex;
-  box-sizing: border-box;
-  gap: #{$flex-gap};
-  flex-direction: #{$flex-direction};
-  flex-wrap: #{$flex-wrap};
-  justify-content: #{$flex-justify};
-  align-items: #{$flex-align};
-  align-content: #{$flex-align-content};
-
-  $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(("flex", "gap"), $bp-names, $i, $flex-gap)};
-      flex-direction: #{sass.fn-naming-cascade-dvar(
-          ("flex", "direction"),
-          $bp-names,
-          $i,
-          $flex-direction
-        )};
-      flex-wrap: #{sass.fn-naming-cascade-dvar(("flex", "wrap"), $bp-names, $i, $flex-wrap)};
-      justify-content: #{sass.fn-naming-cascade-dvar(
-          ("flex", "justify"),
-          $bp-names,
-          $i,
-          $flex-justify
-        )};
-      align-items: #{sass.fn-naming-cascade-dvar(("flex", "align"), $bp-names, $i, $flex-align)};
-      align-content: #{sass.fn-naming-cascade-dvar(
-          ("flex", "align-content"),
-          $bp-names,
-          $i,
-          $flex-align-content
-        )};
-    }
-  }
-}

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

@@ -1,15 +0,0 @@
-export type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
-
-export type FlexOption = {
-  breakpoint?: string;
-  gap?: string | number;
-  direction?: FlexDirection;
-  wrap?: string;
-  justify?: string;
-  align?: string;
-  alignContent?: string;
-};
-
-export type FlexProps = {
-  options?: FlexOption[];
-};

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

@@ -1,34 +0,0 @@
-<style lang="scss" src="./flex.scss" scoped></style>
-<template src="./flex.html"></template>
-<script lang="ts" setup>
-import { computed } from "vue";
-import { cssPrefix, cssProperty } 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 {
-      [cssProperty(["flex", "gap", option?.breakpoint || ""])]:
-        typeof option.gap === "number" ? `${option.gap}px` : option.gap,
-      [cssProperty(["flex", "direction", option?.breakpoint || ""])]: option.direction,
-      [cssProperty(["flex", "wrap", option?.breakpoint || ""])]: option.wrap,
-      [cssProperty(["flex", "justify", option?.breakpoint || ""])]: option.justify,
-      [cssProperty(["flex", "align", option?.breakpoint || ""])]: option.align,
-      [cssProperty(["flex", "align-content", option?.breakpoint || ""])]: option.alignContent,
-    };
-  });
-
-  return {
-    class: [cssPrefix("flex")],
-    style,
-  };
-});
-</script>

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

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

package/src/components/layout/flex-item/flex-item.html

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

package/src/components/layout/flex-item/flex-item.scss

@@ -1,48 +0,0 @@
-@use "@toife/sass-layer" as sass;
-@use "sass:map";
-@use "sass:list";
-
-$flex-item: sass.fn-naming-prefix("flex-item");
-$flex-item-grow: sass.fn-naming-var("flex-item", "grow");
-$flex-item-shrink: sass.fn-naming-var("flex-item", "shrink");
-$flex-item-basis: sass.fn-naming-var("flex-item", "basis");
-$flex-item-order: sass.fn-naming-var("flex-item", "order");
-
-.#{$flex-item} {
-  box-sizing: border-box;
-  min-width: 0;
-  flex-grow: #{$flex-item-grow};
-  flex-shrink: #{$flex-item-shrink};
-  flex-basis: #{$flex-item-basis};
-  order: #{$flex-item-order};
-
-  $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) {
-      flex-grow: #{sass.fn-naming-cascade-dvar(
-          ("flex-item", "grow"),
-          $bp-names,
-          $i,
-          $flex-item-grow
-        )};
-      flex-shrink: #{sass.fn-naming-cascade-dvar(
-          ("flex-item", "shrink"),
-          $bp-names,
-          $i,
-          $flex-item-shrink
-        )};
-      flex-basis: #{sass.fn-naming-cascade-dvar(
-          ("flex-item", "basis"),
-          $bp-names,
-          $i,
-          $flex-item-basis
-        )};
-      order: #{sass.fn-naming-cascade-dvar(("flex-item", "order"), $bp-names, $i, $flex-item-order)};
-    }
-  }
-}

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

@@ -1,11 +0,0 @@
-export type FlexItemOption = {
-  breakpoint?: string;
-  grow?: number;
-  shrink?: number;
-  basis?: string;
-  order?: number;
-};
-
-export type FlexItemProps = {
-  options?: FlexItemOption[];
-};

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

@@ -1,27 +0,0 @@
-<style lang="scss" src="./flex-item.scss" scoped></style>
-<template src="./flex-item.html"></template>
-<script lang="ts" setup>
-import { computed } from "vue";
-import { cssPrefix, cssProperty } from "../../../utils";
-import type { FlexItemProps } from "./flex-item.type";
-
-const props = withDefaults(defineProps<FlexItemProps>(), {
-  options: () => [],
-});
-
-const flexItemAttrs = computed(() => {
-  const style = props.options.map((option) => {
-    return {
-      [cssProperty(["flex-item", "grow", option?.breakpoint || ""])]: option.grow,
-      [cssProperty(["flex-item", "shrink", option?.breakpoint || ""])]: option.shrink,
-      [cssProperty(["flex-item", "basis", option?.breakpoint || ""])]: option.basis,
-      [cssProperty(["flex-item", "order", option?.breakpoint || ""])]: option.order,
-    };
-  });
-
-  return {
-    class: [cssPrefix("flex-item")],
-    style,
-  };
-});
-</script>

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

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

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

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

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

@@ -1,51 +0,0 @@
-@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;
-  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

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

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

@@ -1,32 +0,0 @@
-<style lang="scss" src="./grid.scss" scoped></style>
-<template src="./grid.html"></template>
-<script lang="ts" setup>
-import { computed } from "vue";
-import { cssPrefix, cssProperty } 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 {
-      [cssProperty(["grid", "gap", option?.breakpoint || ""])]:
-        typeof option.gap === "number" ? `${option.gap}px` : option.gap,
-      [cssProperty(["grid", "columns", option?.breakpoint || ""])]: option.columns,
-      [cssProperty(["grid", "rows", option?.breakpoint || ""])]: option.rows,
-      [cssProperty(["grid", "auto-flow", option?.breakpoint || ""])]: option.autoFlow,
-    };
-  });
-
-  return {
-    class: [cssPrefix("grid")],
-    style,
-  };
-});
-</script>

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

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

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

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

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

@@ -1,49 +0,0 @@
-@use "@toife/sass-layer" as sass;
-@use "sass:map";
-@use "sass:list";
-
-$grid-item: sass.fn-naming-prefix("grid-item");
-$grid-item-row: sass.fn-naming-var("grid-item", "row");
-$grid-item-column: sass.fn-naming-var("grid-item", "column");
-$grid-item-justify: sass.fn-naming-var("grid-item", "justify");
-$grid-item-align: sass.fn-naming-var("grid-item", "align");
-
-.#{$grid-item} {
-  display: grid;
-  box-sizing: border-box;
-  min-width: 0;
-  grid-column: #{$grid-item-column};
-  grid-row: #{$grid-item-row};
-  justify-self: #{$grid-item-justify};
-  align-self: #{$grid-item-align};
-
-  $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) {
-      grid-column: #{sass.fn-naming-cascade-dvar(
-          ("grid-item", "column"),
-          $bp-names,
-          $i,
-          $grid-item-column
-        )};
-      grid-row: #{sass.fn-naming-cascade-dvar(("grid-item", "row"), $bp-names, $i, $grid-item-row)};
-      justify-self: #{sass.fn-naming-cascade-dvar(
-          ("grid-item", "justify"),
-          $bp-names,
-          $i,
-          $grid-item-justify
-        )};
-      align-self: #{sass.fn-naming-cascade-dvar(
-          ("grid-item", "align"),
-          $bp-names,
-          $i,
-          $grid-item-align
-        )};
-    }
-  }
-}