@toife/vue 3.1.3 → 3.1.4

package/package.json

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

package/src/components/app/app.type.ts

@@ -5,6 +5,11 @@ import type { Ref } from "vue";
  */
 export type AppDirection = "left" | "right";
 
+/**
+ * App Size Type
+ */
+export type AppSize = "small" | "standard" | "large";
+
 /**
  * App Props Type
  */
@@ -15,6 +20,7 @@ export type AppProps = {
   shadow?: boolean;
   triple?: boolean;
   direction?: AppDirection;
+  size?: AppSize;
 };
 
 /**

package/src/components/app/app.vue

@@ -18,6 +18,7 @@ const props = withDefaults(defineProps<AppProps>(), {
   shadow: false,
   triple: false,
   direction: "left",
+  size: "standard",
 });
 const { shape, divider, role, shadow, triple, direction } = toRefs(props);
 const decisionModal = useDecisionModal();
@@ -28,7 +29,12 @@ const action = useAction();
 // Root layout classes for the application shell (global theme layer)
 const appAttrs = computed(() => {
   return {
-    class: [withPrefix(["layer", "app"]), withPrefix(["shape", shape.value]), withPrefix("app")],
+    class: [
+      withPrefix("app"),
+      withPrefix(["layer", "app"]),
+      withPrefix(["shape", shape.value]),
+      withPrefix(["size", props.size]),
+    ],
   };
 });
 

package/src/components/avatar/avatar.scss

@@ -5,7 +5,8 @@ $avatar: sass.fn-naming-prefix("avatar");
 $shape-pill: sass.fn-naming-prefix("shape-pill");
 
 // Property - layer: avatar
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+$radius-size: sass.fn-naming-var("radius-size");
 $border-width: sass.fn-naming-var("stroke", "width");
 $width: sass.fn-naming-var("width");
 $transition-duration: sass.fn-naming-var("motion", "duration");
@@ -21,7 +22,7 @@ $avatar-border-color: sass.fn-naming-var("avatar", "border-color");
   background-color: rgb(#{$avatar-background-color});
   width: #{$width};
   aspect-ratio: 1/1;
-  border-radius: #{$border-radius};
+  border-radius: calc(min(#{$width}, #{$radius-size}) * #{$radius-ratio});
   background-repeat: no-repeat;
   background-size: cover;
   transition:

package/src/components/button/button.scss

@@ -5,13 +5,15 @@ $button: sass.fn-naming-prefix("button");
 $loader: sass.fn-naming-prefix("loader");
 
 // Property name
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+$radius-size: sass.fn-naming-var("radius-size");
 $border-width: sass.fn-naming-var("stroke", "width");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 $spacing-x: sass.fn-naming-var("spacing", "x");
 $spacing-y: sass.fn-naming-var("spacing", "y");
 
 $button-color: sass.fn-naming-var("button", "color");
+$button-color-disabled: sass.fn-naming-var("button", "color", "disabled");
 
 $button-border-color: sass.fn-naming-var("button", "border-color");
 $button-border-color-hover: sass.fn-naming-var("button", "border-color", "hover");
@@ -28,7 +30,7 @@ $button-background-color-disabled: sass.fn-naming-var("button", "background-colo
 $button-box-shadow-color-focus: sass.fn-naming-var("button", "box-shadow-color", "focus");
 
 $size-font-size: sass.fn-naming-var("font-size");
-$size-height: sass.fn-naming-var("height");
+$size-control-block-size: sass.fn-naming-var("control-block-size");
 $size-coefficient-x: sass.fn-naming-var("coefficient-x");
 $size-coefficient-y: sass.fn-naming-var("coefficient-y");
 $size-line-height: sass.fn-naming-var("line-height");
@@ -45,7 +47,7 @@ $size-line-height: sass.fn-naming-var("line-height");
   border-style: solid;
   border-width: #{$border-width};
   white-space: nowrap;
-  border-radius: #{$border-radius};
+  border-radius: calc(min(#{$size-control-block-size}, #{$radius-size}) * #{$radius-ratio});
   cursor: pointer;
   transition:
     color #{$transition-duration} ease,
@@ -57,7 +59,7 @@ $size-line-height: sass.fn-naming-var("line-height");
 
   padding: calc(#{$spacing-y} * #{$size-coefficient-y}) calc(#{$spacing-x} * #{$size-coefficient-x});
   font-size: #{$size-font-size};
-  height: #{$size-height};
+  height: #{$size-control-block-size};
   line-height: #{$size-line-height};
 
   &:hover {
@@ -83,8 +85,9 @@ $size-line-height: sass.fn-naming-var("line-height");
 
   &:disabled,
   &.disabled {
-    border-color: rgba(#{$button-border-color-disabled}, 0.5);
-    background-color: rgba(#{$button-background-color-disabled}, 0.5);
+    border-color: rgb(#{$button-border-color-disabled});
+    background-color: rgb(#{$button-background-color-disabled});
+    color: rgb(#{$button-color-disabled});
     cursor: not-allowed;
   }
 

package/src/components/button/button.type.ts

@@ -1,7 +1,9 @@
+import { AppSize } from "../app";
+
 // Type definitions
 export type ButtonVariant = "fill" | "outline" | "text" | "link";
 
-export type ButtonSize = "small" | "standard" | "large";
+export type ButtonSize = AppSize;
 
 export type ButtonProps = {
   role?: string;

package/src/components/card/card/card.scss

@@ -7,8 +7,10 @@ $card: sass.fn-naming-prefix("card");
 $card-background-color: sass.fn-naming-var("card", "background-color");
 $card-color: sass.fn-naming-var("card", "color");
 
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+$radius-size: sass.fn-naming-var("radius-size");
 $transition-duration: sass.fn-naming-var("motion", "duration");
+$border-radius: calc(#{$radius-size} * #{$radius-ratio});
 
 .#{$card} {
   background-color: rgb(#{$card-background-color});

package/src/components/checkbox/checkbox.scss

@@ -28,7 +28,10 @@ $checkbox-border-color-disabled: sass.fn-naming-var("checkbox", "border-color",
 $checkbox-box-shadow-color-focus: sass.fn-naming-var("checkbox", "box-shadow-color", "focus");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+$radius-size: sass.fn-naming-var("radius-size");
+$size-control-mark-size: sass.fn-naming-var("control-mark-size");
+$border-radius: calc(min(#{$size-control-mark-size}, #{$radius-size}) * #{$radius-ratio});
 
 .#{$checkbox} {
   display: inline-flex;
@@ -41,13 +44,14 @@ $border-radius: sass.fn-naming-var("border-radius");
 
   .#{$checkbox-icon} {
     flex-shrink: 0;
-    width: 1.25rem;
-    height: 1.25rem;
+    width: #{$size-control-mark-size};
+    height: #{$size-control-mark-size};
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid rgb(#{$checkbox-color});
     background-color: transparent;
+    border-radius: #{$border-radius};
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,
@@ -55,13 +59,12 @@ $border-radius: sass.fn-naming-var("border-radius");
       color #{$transition-duration} ease,
       border-radius #{$transition-duration} ease,
       transform #{$transition-duration} ease;
-    border-radius: calc(#{$border-radius} * 0.5);
     box-sizing: border-box;
 
     &::after {
       content: "";
-      width: 0.2rem;
-      height: 0.5rem;
+      width: calc(#{$size-control-mark-size} * 0.2);
+      height: calc(#{$size-control-mark-size} * 0.5);
       border: solid rgb(#{$checkbox-color});
       border-width: 0 2px 2px 0;
       transform: rotate(45deg) scale(0);
@@ -75,14 +78,6 @@ $border-radius: sass.fn-naming-var("border-radius");
     }
   }
 
-  &.#{$shape-rounded} .#{$checkbox-icon} {
-    border-radius: calc(#{$border-radius} - 10%);
-  }
-
-  &.#{$shape-pill} .#{$checkbox-icon} {
-    border-radius: 50%;
-  }
-
   &:not(.on) {
     .#{$checkbox-icon} {
       background-color: transparent;

package/src/components/checkbox/checkbox.type.ts

@@ -1,8 +1,12 @@
+import { AppSize } from "../app";
+
 export type CheckboxVariant = "fill" | "outline";
+export type CheckboxSize = AppSize;
 
 export type CheckboxProps = {
   modelValue?: boolean;
   role?: string;
+  size?: CheckboxSize;
   shape?: string;
   variant?: CheckboxVariant;
   readonly?: boolean;

package/src/components/checkbox/checkbox.vue

@@ -11,6 +11,7 @@ import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 const props = withDefaults(defineProps<CheckboxProps>(), {
   modelValue: false,
   disabled: false,
+  size: "standard",
   variant: "fill",
   readonly: false,
   shadow: undefined,
@@ -34,6 +35,7 @@ const checkboxAttrs = computed(() => {
       withPrefix(["layer", "checkbox"]),
       withPrefix(["role", role]),
       withPrefix(["shape", shape]),
+      withPrefix(["size", props.size]),
       withPrefix("checkbox"),
       props.variant,
       {

package/src/components/decision-modal/decision-modal.scss

@@ -13,7 +13,8 @@ $decision-modal-background-color: sass.fn-naming-var("decision-modal", "backgrou
 $decision-modal-border-color: sass.fn-naming-var("decision-modal", "border-color");
 $decision-modal-color: sass.fn-naming-var("decision-modal", "color");
 
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+$radius-size: sass.fn-naming-var("radius-size");
 $width: sass.fn-naming-var("viewport", "width");
 $max-width: sass.fn-naming-var("overlay", "max-width");
 $padding-y: sass.fn-naming-var("spacing", "y");
@@ -23,6 +24,7 @@ $margin-x: sass.fn-naming-var("spacing", "x");
 $animation-duration: sass.fn-naming-var("motion", "duration");
 $border-width: sass.fn-naming-var("stroke", "width");
 $transition-duration: sass.fn-naming-var("motion", "duration");
+$border-radius: calc(min(#{$width}, #{$radius-size}) * #{$radius-ratio});
 
 .#{$decision-modal} {
   // Styles

package/src/components/dropdown/dropdown.scss

@@ -8,7 +8,7 @@ $dropdown-panel: sass.fn-naming-prefix("dropdown-panel");
 $dropdown-border-color: sass.fn-naming-var("dropdown", "border-color");
 $dropdown-background-color: sass.fn-naming-var("dropdown", "background-color");
 $dropdown-color: sass.fn-naming-var("dropdown", "color");
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
 $border-width: sass.fn-naming-var("stroke", "width");
 $spacing-x: sass.fn-naming-var("spacing", "x");
 $spacing-y: sass.fn-naming-var("spacing", "y");
@@ -16,6 +16,9 @@ $size-font-size: sass.fn-naming-var("font-size");
 $size-line-height: sass.fn-naming-var("line-height");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
+$size-control-block-size: sass.fn-naming-var("control-block-size");
+$radius-size: sass.fn-naming-var("radius-size");
+
 .#{$dropdown} {
   position: relative;
   display: block;
@@ -27,7 +30,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
   z-index: 20;
   min-width: 100%;
   box-sizing: border-box;
-  border-radius: #{$border-radius};
+  border-radius: calc(min(#{$size-control-block-size}, #{$radius-size}) * #{$radius-ratio});
   border-width: #{$border-width};
   margin: #{$spacing-y} 0;
   border-style: solid;

package/src/components/dropdown/dropdown.type.ts

@@ -1,7 +1,9 @@
-import type { AppDirection } from "../app";
+import type { AppDirection, AppSize } from "../app";
 
 export type DropdownPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
 
+export type DropdownSize = AppSize;
+
 export type DropdownProps = {
   modelValue?: boolean;
   disabled?: boolean;
@@ -10,6 +12,7 @@ export type DropdownProps = {
   shadow?: boolean;
   shape?: string;
   direction?: AppDirection;
+  size?: DropdownSize;
 };
 
 export type DropdownEmit = {

package/src/components/dropdown/dropdown.vue

@@ -16,6 +16,7 @@ const props = withDefaults(defineProps<DropdownProps>(), {
   shadow: undefined,
   shape: undefined,
   direction: undefined,
+  size: "standard",
 });
 const emit = defineEmits<DropdownEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
@@ -37,6 +38,7 @@ const wrapperAttrs = computed(() => {
       withPrefix(["layer", "dropdown"]),
       withPrefix(["role", role]),
       withPrefix(["shape", shape]),
+      withPrefix(["size", props.size]),
       withPrefix("dropdown"),
       {
         open: isOpen.value,
@@ -48,6 +50,8 @@ const wrapperAttrs = computed(() => {
 });
 
 const panelAttrs = computed(() => {
+  const shape = props.shape ?? appState?.shape.value ?? "";
+
   return {
     class: [withPrefix("dropdown-panel"), props.placement],
   };

package/src/components/field/field.type.ts

@@ -1,7 +1,7 @@
-import type { AppDirection } from "../app";
+import type { AppDirection, AppSize } from "../app";
 
 export type FieldVariant = "outline" | "fill" | "underline";
-export type FieldSize = "small" | "standard" | "large";
+export type FieldSize = AppSize;
 export type FieldType = "text" | "number" | "email" | "password" | "tel" | "url" | "paragraph";
 
 // Type definitions

package/src/components/field/outline/outline.scss

@@ -14,7 +14,8 @@ $field-background-color: sass.fn-naming-var("field", "background-color");
 $field-line: sass.fn-naming-var("field", "line");
 $field-max-line: sass.fn-naming-var("field", "max-line");
 
-$border-radius: sass.fn-naming-var("border-radius");
+$radius-ratio: sass.fn-naming-var("radius-ratio");
+$radius-size: sass.fn-naming-var("radius-size");
 $border-width: sass.fn-naming-var("stroke", "width");
 $app-color: sass.fn-naming-var("app", "color");
 
@@ -22,7 +23,7 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
 $spacing-y: sass.fn-naming-var("spacing", "y");
 
 $size-font-size: sass.fn-naming-var("font-size");
-$size-height: sass.fn-naming-var("height");
+$size-control-block-size: sass.fn-naming-var("control-block-size");
 $size-coefficient-x: sass.fn-naming-var("coefficient-x");
 $size-coefficient-y: sass.fn-naming-var("coefficient-y");
 $size-line-height: sass.fn-naming-var("line-height");
@@ -45,7 +46,7 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
       color #{$transition-duration} ease,
       border-radius #{$transition-duration} ease;
     border-color: rgb(#{$field-border-color});
-    border-radius: #{$border-radius};
+    border-radius: calc(min(#{$size-control-block-size}, #{$radius-size}) * #{$radius-ratio});
     border-width: #{$border-width};
     border-style: solid;
     overflow: hidden;
@@ -64,8 +65,8 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
     position: relative;
     background-color: transparent;
     z-index: 2;
-    min-height: calc(#{$field-line} * #{$size-height} - 2 * #{$border-width});
-    max-height: calc(#{$field-max-line} * #{$size-height} - 2 * #{$border-width});
+    min-height: calc(#{$field-line} * #{$size-control-block-size} - 2 * #{$border-width});
+    max-height: calc(#{$field-max-line} * #{$size-control-block-size} - 2 * #{$border-width});
     box-sizing: border-box;
     width: 100%;
     flex: 1;
@@ -96,8 +97,8 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
     position: relative;
     background-color: transparent;
     z-index: 2;
-    min-height: calc(#{$field-line} * #{$size-height} - 2 * #{$border-width});
-    max-height: calc(#{$field-max-line} * #{$size-height} - 2 * #{$border-width});
+    min-height: calc(#{$field-line} * #{$size-control-block-size} - 2 * #{$border-width});
+    max-height: calc(#{$field-max-line} * #{$size-control-block-size} - 2 * #{$border-width});
     box-sizing: border-box;
     width: 100%;
     flex: 1;
@@ -226,7 +227,7 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
         color: rgba(#{$app-color}, 0.5);
         transition: color #{$transition-duration} ease;
         position: absolute;
-        height: calc(#{$size-height} - #{$border-width} * 2);
+        height: calc(#{$size-control-block-size} - #{$border-width} * 2);
         box-sizing: border-box;
         top: 0;
         pointer-events: none;

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

@@ -5,6 +5,8 @@ $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} {
@@ -16,7 +18,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     color #{$transition-duration} ease,
     border-radius #{$transition-duration} ease;
   position: absolute;
-  border-radius: 3px;
+  border-radius: calc(min(40px, #{$radius-size}) * #{$radius-ratio});
   z-index: 99;
 
   &.bottom {

package/src/components/index.ts

@@ -28,3 +28,4 @@ export * from "./collapse";
 export * from "./form-group";
 export * from "./dropdown";
 export * from "./select";
+export * from "./slide-range";

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

@@ -16,8 +16,6 @@ $flex-align-content: sass.fn-naming-var("flex", "align-content");
 .#{$flex} {
   display: flex;
   box-sizing: border-box;
-  width: 100%;
-  min-height: 0;
   gap: #{$flex-gap};
   flex-direction: #{$flex-direction};
   flex-wrap: #{$flex-wrap};

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

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

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

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

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

@@ -0,0 +1,27 @@
+<style lang="scss" src="./flex-item.scss" scoped></style>
+<template src="./flex-item.html"></template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { withPrefix, property } 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 {
+      [property(["flex-item", "grow", option?.breakpoint || ""])]: option.grow,
+      [property(["flex-item", "shrink", option?.breakpoint || ""])]: option.shrink,
+      [property(["flex-item", "basis", option?.breakpoint || ""])]: option.basis,
+      [property(["flex-item", "order", option?.breakpoint || ""])]: option.order,
+    };
+  });
+
+  return {
+    class: [withPrefix("flex-item")],
+    style,
+  };
+});
+</script>

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

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

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

@@ -14,8 +14,6 @@ $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};

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

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

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

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

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

@@ -0,0 +1,27 @@
+<style lang="scss" src="./grid-item.scss" scoped></style>
+<template src="./grid-item.html"></template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { withPrefix, property } 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 {
+      [property(["grid-item", "row", option?.breakpoint || ""])]: option.row,
+      [property(["grid-item", "column", option?.breakpoint || ""])]: option.column,
+      [property(["grid-item", "justify", option?.breakpoint || ""])]: option.justify,
+      [property(["grid-item", "align", option?.breakpoint || ""])]: option.align,
+    };
+  });
+
+  return {
+    class: [withPrefix("grid-item")],
+    style,
+  };
+});
+</script>

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

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

package/src/components/layout/index.ts

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