@toife/vue 3.1.6 → 3.2.0

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
-        )};
-    }
-  }
-}

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

@@ -1,14 +0,0 @@
-export type GridItemJustify = "start" | "end" | "center" | "stretch";
-export type GridItemAlign = "start" | "end" | "center" | "stretch";
-
-export type GridItemOption = {
-  breakpoint?: string;
-  row?: number;
-  column?: number;
-  justify?: GridItemJustify;
-  align?: GridItemAlign;
-};
-
-export type GridItemProps = {
-  options?: GridItemOption[];
-};

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

@@ -1,27 +0,0 @@
-<style lang="scss" src="./grid-item.scss" scoped></style>
-<template src="./grid-item.html"></template>
-<script lang="ts" setup>
-import { computed } from "vue";
-import { cssPrefix, cssProperty } from "../../../utils";
-import type { GridItemProps } from "./grid-item.type";
-
-const props = withDefaults(defineProps<GridItemProps>(), {
-  options: () => [],
-});
-
-const gridItemAttrs = computed(() => {
-  const style = props.options.map((option) => {
-    return {
-      [cssProperty(["grid-item", "row", option?.breakpoint || ""])]: option.row,
-      [cssProperty(["grid-item", "column", option?.breakpoint || ""])]: option.column,
-      [cssProperty(["grid-item", "justify", option?.breakpoint || ""])]: option.justify,
-      [cssProperty(["grid-item", "align", option?.breakpoint || ""])]: option.align,
-    };
-  });
-
-  return {
-    class: [cssPrefix("grid-item")],
-    style,
-  };
-});
-</script>

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

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

package/src/components/layout/index.ts

@@ -1,4 +0,0 @@
-export * from "./grid";
-export * from "./flex";
-export * from "./grid-item";
-export * from "./flex-item";

package/src/components/modal/index.ts

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

package/src/components/modal/modal.html

@@ -1,20 +0,0 @@
-<Present
-  ref="present"
-  :duration="duration"
-  :bounce="bounce"
-  :class="class"
-  :placement="placement"
-  :backdrop="backdrop"
-  :visible="visible"
-  :keepalive="keepalive"
-  @close="close"
-  :style="style"
->
-  <GestureIndicator
-    :placement="placement"
-    v-if="gesture && indicator && placement != 'center'"
-  ></GestureIndicator>
-  <div ref="modal" v-bind="modalAttrs">
-    <slot />
-  </div>
-</Present>

package/src/components/modal/modal.scss

@@ -1,80 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$modal: sass.fn-naming-prefix("modal");
-
-// Property name - layer: modal
-$modal-background-color: sass.fn-naming-var("modal", "background-color");
-$viewport-width: sass.fn-naming-var("viewport", "width");
-$viewport-max-width: sass.fn-naming-var("viewport", "max-width");
-$viewport-height: sass.fn-naming-var("viewport", "height");
-$viewport-max-height: sass.fn-naming-var("viewport", "max-height");
-$radius-ratio: sass.fn-naming-var("radius-ratio");
-$radius-size: sass.fn-naming-var("radius-size");
-$safe-area-top: sass.fn-naming-var("safe-area", "top");
-$safe-area-bottom: sass.fn-naming-var("safe-area", "bottom");
-$safe-area-left: sass.fn-naming-var("safe-area", "left");
-$safe-area-right: sass.fn-naming-var("safe-area", "right");
-$transition-duration: sass.fn-naming-var("duration");
-$border-radius: calc(min(#{$viewport-width}, #{$radius-size}) * #{$radius-ratio});
-
-.#{$modal} {
-  background: rgba(#{$modal-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;
-  position: relative;
-
-  &.bottom,
-  &.top,
-  &.fullscreen {
-    width: #{$viewport-width};
-    max-width: #{$viewport-max-width};
-  }
-
-  &.left,
-  &.right,
-  &.fullscreen {
-    height: #{$viewport-height};
-    max-height: #{$viewport-max-height};
-  }
-
-  &:not(.fullscreen) {
-    overflow: hidden;
-
-    &.top {
-      max-height: calc(#{$viewport-max-height} - #{$safe-area-bottom});
-      max-width: #{$viewport-max-width};
-      border-bottom-left-radius: #{$border-radius};
-      border-bottom-right-radius: #{$border-radius};
-    }
-
-    &.bottom {
-      max-height: calc(#{$viewport-max-height} - #{$safe-area-top});
-      max-width: #{$viewport-max-width};
-      border-top-left-radius: #{$border-radius};
-      border-top-right-radius: #{$border-radius};
-    }
-
-    &.left {
-      max-width: calc(#{$viewport-max-width} - #{$safe-area-right});
-      max-height: #{$viewport-max-height};
-      border-top-right-radius: #{$border-radius};
-      border-bottom-right-radius: #{$border-radius};
-    }
-
-    &.right {
-      max-width: calc(#{$viewport-max-width} - #{$safe-area-left});
-      max-height: #{$viewport-max-height};
-      border-top-left-radius: #{$border-radius};
-      border-bottom-left-radius: #{$border-radius};
-    }
-
-    &.center {
-      border-radius: #{$border-radius};
-    }
-  }
-}

package/src/components/modal/modal.type.ts

@@ -1,21 +0,0 @@
-// Props
-export type ModalProps = {
-  role?: string;
-  class?: unknown;
-  visible?: boolean;
-  gesture?: boolean;
-  fullscreen?: boolean;
-  placement?: "top" | "left" | "right" | "center" | "bottom";
-  keepalive?: boolean;
-  backdrop?: "display" | "none" | "transparent";
-  shape?: string;
-  indicator?: boolean;
-  duration?: number;
-  bounce?: number | string;
-  style?: unknown;
-};
-
-// Emit
-export type ModalEmit = {
-  (e: "close", type?: string): void;
-};