@toife/vue 3.1.4 → 3.1.5

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

@@ -9,9 +9,9 @@ $button: sass.fn-naming-prefix("button");
 $shape-pill: sass.fn-naming-prefix("shape-pill");
 
 // Property name - layer: decision-modal
-$decision-modal-background-color: sass.fn-naming-var("decision-modal", "background-color");
-$decision-modal-border-color: sass.fn-naming-var("decision-modal", "border-color");
-$decision-modal-color: sass.fn-naming-var("decision-modal", "color");
+$decision-modal-background-color: sass.fn-naming-var("modal", "background-color");
+$decision-modal-border-color: sass.fn-naming-var("modal", "border-color");
+$decision-modal-color: sass.fn-naming-var("modal", "color");
 
 $radius-ratio: sass.fn-naming-var("radius-ratio");
 $radius-size: sass.fn-naming-var("radius-size");
@@ -28,8 +28,8 @@ $border-radius: calc(min(#{$width}, #{$radius-size}) * #{$radius-ratio});
 
 .#{$decision-modal} {
   // Styles
-  background-color: rgb(#{$decision-modal-background-color});
-  color: rgb(#{$decision-modal-color});
+  background-color: rgba(#{$decision-modal-background-color});
+  color: rgba(#{$decision-modal-color});
   width: #{$width};
   max-width: #{$max-width};
   overflow: hidden;
@@ -51,7 +51,7 @@ $border-radius: calc(min(#{$width}, #{$radius-size}) * #{$radius-ratio});
     align-items: center;
     font-weight: 600;
     border-bottom: #{$border-width} solid transparent;
-    color: rgb(#{$decision-modal-color});
+    color: rgba(#{$decision-modal-color});
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,
@@ -63,14 +63,14 @@ $border-radius: calc(min(#{$width}, #{$radius-size}) * #{$radius-ratio});
   // Content of alert
   .#{$decision-modal-body} {
     padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
-    color: rgb(#{$decision-modal-color});
+    color: rgba(#{$decision-modal-color});
   }
 
   // Footer of alert
   .#{$decision-modal-footer} {
     display: flex;
     border-top: #{$border-width} solid transparent;
-    color: rgb(#{$decision-modal-color});
+    color: rgba(#{$decision-modal-color});
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,
@@ -111,7 +111,7 @@ $border-radius: calc(min(#{$width}, #{$radius-size}) * #{$radius-ratio});
   &.divider {
     .#{$decision-modal-header},
     .#{$decision-modal-footer} {
-      border-color: rgb(#{$decision-modal-border-color});
+      border-color: rgba(#{$decision-modal-border-color});
     }
   }
 

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

@@ -9,7 +9,7 @@ import {
   type DecisionModalButton,
   type DecisionModalProps,
 } from "./decision-modal.type";
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -45,10 +45,10 @@ const decisionModalAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "decision-modal"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape.value]),
-      withPrefix("decision-modal"),
+      cssPrefix(["layer", "modal"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape.value]),
+      cssPrefix("decision-modal"),
       {
         pop: pop.value,
         divider: divider.value,
@@ -59,19 +59,19 @@ const decisionModalAttrs = computed(() => {
 
 const decisionModalHeaderAttrs = computed(() => {
   return {
-    class: [withPrefix("decision-modal-header")],
+    class: [cssPrefix("decision-modal-header")],
   };
 });
 
 const decisionModalBodyAttrs = computed(() => {
   return {
-    class: [withPrefix("decision-modal-body")],
+    class: [cssPrefix("decision-modal-body")],
   };
 });
 
 const decisionModalFooterAttrs = computed(() => {
   return {
-    class: [withPrefix("decision-modal-footer"), `actions-flow-${props.flow}`],
+    class: [cssPrefix("decision-modal-footer"), `actions-flow-${props.flow}`],
   };
 });
 

package/src/components/divider/divider.scss

@@ -19,11 +19,11 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
 
   &.horizontal {
     width: 100%;
-    border-bottom: #{$border-width} solid rgb(#{$divider-border-color});
+    border-bottom: #{$border-width} solid rgba(#{$divider-border-color});
   }
 
   &.vertical {
     height: 100%;
-    border-right: #{$border-width} solid rgb(#{$divider-border-color});
+    border-right: #{$border-width} solid rgba(#{$divider-border-color});
   }
 }

package/src/components/divider/divider.vue

@@ -1,7 +1,7 @@
 <style lang="scss" src="./divider.scss" scoped></style>
 <template src="./divider.html"></template>
 <script lang="ts" setup>
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { type DividerProps } from "./divider.type";
 import { computed, inject } from "vue";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
@@ -19,9 +19,9 @@ const dividerAttrs = computed(() => {
   const role = props.role || appState?.role.value || "";
   return {
     class: [
-      withPrefix(["layer", "divider"]),
-      withPrefix(["role", role]),
-      withPrefix("divider"),
+      cssPrefix(["layer", "divider"]),
+      cssPrefix(["role", role]),
+      cssPrefix("divider"),
       {
         [props.direction]: true,
       },

package/src/components/dropdown/dropdown.scss

@@ -34,9 +34,9 @@ $radius-size: sass.fn-naming-var("radius-size");
   border-width: #{$border-width};
   margin: #{$spacing-y} 0;
   border-style: solid;
-  border-color: rgb(#{$dropdown-border-color});
-  background-color: rgb(#{$dropdown-background-color});
-  color: rgb(#{$dropdown-color});
+  border-color: rgba(#{$dropdown-border-color});
+  background-color: rgba(#{$dropdown-background-color});
+  color: rgba(#{$dropdown-color});
   font-size: #{$size-font-size};
   line-height: #{$size-line-height};
   max-height: min(50vh, 16rem);

package/src/components/dropdown/dropdown.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, onMounted, onUnmounted, ref, watch } from "vue";
 import type { DropdownEmit, DropdownProps } from "./dropdown.type";
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -35,11 +35,11 @@ const wrapperAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "dropdown"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape]),
-      withPrefix(["size", props.size]),
-      withPrefix("dropdown"),
+      cssPrefix(["layer", "dropdown"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
+      cssPrefix(["size", props.size]),
+      cssPrefix("dropdown"),
       {
         open: isOpen.value,
         disabled: props.disabled,
@@ -50,10 +50,8 @@ const wrapperAttrs = computed(() => {
 });
 
 const panelAttrs = computed(() => {
-  const shape = props.shape ?? appState?.shape.value ?? "";
-
   return {
-    class: [withPrefix("dropdown-panel"), props.placement],
+    class: [cssPrefix("dropdown-panel"), props.placement],
   };
 });
 

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

@@ -7,7 +7,7 @@ export type FieldType = "text" | "number" | "email" | "password" | "tel" | "url"
 // Type definitions
 export type FieldProps = {
   // Wrapper
-  modelValue?: string;
+  modelValue?: string | number;
   name?: string;
   variant?: FieldVariant;
   role?: string;
@@ -18,7 +18,7 @@ export type FieldProps = {
 
   // Input
   id?: string;
-  value?: string;
+  value?: string | number;
   placeholder?: string;
   disabled?: boolean;
   readonly?: boolean;

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

@@ -11,13 +11,15 @@ $field-help: sass.fn-naming-prefix("field-help");
 // Property name - layer: field
 $field-border-color: sass.fn-naming-var("field", "border-color");
 $field-background-color: sass.fn-naming-var("field", "background-color");
+$field-color: sass.fn-naming-var("field", "color");
+$field-placeholder-color: sass.fn-naming-var("field", "placeholder-color");
+$field-help-color: sass.fn-naming-var("field", "help-color");
 $field-line: sass.fn-naming-var("field", "line");
 $field-max-line: sass.fn-naming-var("field", "max-line");
 
 $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");
 
 $spacing-x: sass.fn-naming-var("spacing", "x");
 $spacing-y: sass.fn-naming-var("spacing", "y");
@@ -45,7 +47,7 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
       background-color #{$transition-duration} ease,
       color #{$transition-duration} ease,
       border-radius #{$transition-duration} ease;
-    border-color: rgb(#{$field-border-color});
+    border-color: rgba(#{$field-border-color});
     border-radius: calc(min(#{$size-control-block-size}, #{$radius-size}) * #{$radius-ratio});
     border-width: #{$border-width};
     border-style: solid;
@@ -86,7 +88,7 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
     }
 
     &::placeholder {
-      color: rgba(#{$app-color}, 0.5);
+      color: rgba(#{$field-placeholder-color});
     }
   }
 
@@ -102,8 +104,8 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
     box-sizing: border-box;
     width: 100%;
     flex: 1;
-    color: rgb(#{$app-color});
-    caret-color: rgb(#{$app-color});
+    color: rgba(#{$field-color});
+    caret-color: rgba(#{$field-color});
     border: none;
     -webkit-user-select: text;
     user-select: text;
@@ -136,7 +138,7 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
     }
 
     &::placeholder {
-      color: rgba(#{$app-color}, 0.5);
+      color: rgba(#{$field-placeholder-color});
     }
   }
 
@@ -148,8 +150,8 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
     position: relative;
     z-index: 2;
     background-color: transparent;
-    color: rgb(#{$app-color});
-    caret-color: rgb(#{$app-color});
+    color: rgba(#{$field-color});
+    caret-color: rgba(#{$field-color});
     border: none;
     // user-select:all breaks caret placement on many mobile browsers for contenteditable.
     -webkit-user-select: text;
@@ -170,7 +172,7 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
 
   // Message
   .#{$field-message} {
-    color: rgb(#{$field-background-color});
+    color: rgba(#{$field-background-color});
     font-size: 0.9em;
     line-height: 1.5;
     transition:
@@ -183,7 +185,7 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
 
   // Help
   .#{$field-help} {
-    color: rgb(#{$app-color}, 0.75);
+    color: rgba(#{$field-help-color});
     font-size: 0.8em;
     line-height: 1.5;
     transition:
@@ -197,13 +199,13 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
   &.focus {
     &.shadow {
       .#{$field-content} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$field-border-color}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgba(#{$field-border-color}, 0.25);
       }
     }
 
     &:not(.shadow) {
       .#{$field-content} {
-        box-shadow: 0 0 0 calc(#{$border-width} * 1.5) rgb(#{$field-border-color});
+        box-shadow: 0 0 0 calc(#{$border-width} * 1.5) rgba(#{$field-border-color});
       }
     }
   }
@@ -224,7 +226,7 @@ $direction-justify-content: sass.fn-naming-var("justify-content");
     div.#{$field-input} {
       &::before {
         content: attr(placeholder);
-        color: rgba(#{$app-color}, 0.5);
+        color: rgba(#{$field-placeholder-color});
         transition: color #{$transition-duration} ease;
         position: absolute;
         height: calc(#{$size-control-block-size} - #{$border-width} * 2);

package/src/components/field/outline/outline.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, nextTick, onMounted, ref, watch } from "vue";
 import type { FieldProps, FieldEmit } from "../field.type";
-import { property, withPrefix } from "../../../utils";
+import { cssProperty, cssPrefix } from "../../../utils";
 
 // Component setup (props, emits, injects)
 // ----------------------------------------------------------------------------
@@ -32,49 +32,57 @@ const isComposing = ref(false);
 // Computed properties
 // ----------------------------------------------------------------------------
 const content = computed(() => {
-  return props.value || props.modelValue;
+  if (props.value !== undefined && props.value !== null) {
+    return props.value;
+  }
+  return props.modelValue ?? "";
+});
+
+const isContentEmpty = computed(() => {
+  const v = content.value;
+  return v === "" || v === undefined || v === null;
 });
 
 const fieldAttrs = computed(() => {
   return {
     class: [
-      withPrefix(["layer", "field"]),
-      withPrefix(["role", props.role || ""]),
-      withPrefix(["shape", props.shape || ""]),
-      withPrefix("field"),
-      withPrefix(["size", props.size]),
-      withPrefix(["direction", props.direction || "left"]),
+      cssPrefix(["layer", "field"]),
+      cssPrefix(["role", props.role || ""]),
+      cssPrefix(["shape", props.shape || ""]),
+      cssPrefix("field"),
+      cssPrefix(["size", props.size]),
+      cssPrefix(["direction", props.direction || "left"]),
       props.variant,
       props.type,
       {
         disabled: props.disabled,
         focus: isFocus.value,
         shadow: props.shadow,
-        empty: !content.value,
+        empty: isContentEmpty.value,
         readonly: props.readonly,
         typing: isComposing.value,
       },
     ],
     style: {
-      [property(["field", "line"])]: props.line,
-      [property(["field", "max-line"])]: props.maxLine || props.line,
+      [cssProperty(["field", "line"])]: props.line,
+      [cssProperty(["field", "max-line"])]: props.maxLine || props.line,
     },
   };
 });
 
 const fieldContentAttrs = computed(() => ({
-  class: [withPrefix("field-content")],
+  class: [cssPrefix("field-content")],
 }));
 
 /** Outer shell: layout, placeholder pseudo-element (must stay off the contenteditable node on iOS). */
 const fieldInputShellAttrs = computed(() => ({
-  class: [withPrefix("field-input")],
+  class: [cssPrefix("field-input")],
   placeholder: props.placeholder,
 }));
 
 /** contenteditable as the literal string "true"|"false" improves mobile WebKit behavior vs boolean. */
 const fieldEditableAttrs = computed(() => ({
-  class: [withPrefix("field-input-editable")],
+  class: [cssPrefix("field-input-editable")],
   name: props.name,
   id: props.id,
   contenteditable:
@@ -84,7 +92,7 @@ const fieldEditableAttrs = computed(() => ({
 }));
 
 const fieldPasswordInputAttrs = computed(() => ({
-  class: [withPrefix("field-input")],
+  class: [cssPrefix("field-input")],
   name: props.name,
   id: props.id,
   placeholder: props.placeholder,
@@ -95,11 +103,11 @@ const fieldPasswordInputAttrs = computed(() => ({
 }));
 
 const fieldMessageAttrs = computed(() => ({
-  class: [withPrefix("field-message")],
+  class: [cssPrefix("field-message")],
 }));
 
 const fieldHelpAttrs = computed(() => ({
-  class: [withPrefix("field-help")],
+  class: [cssPrefix("field-help")],
 }));
 
 // Methods
@@ -235,7 +243,7 @@ const syncContentFromModel = async () => {
   if (!el || props.type === "password") return;
   if (isComposing.value) return;
 
-  const next = normalizeText(content.value ?? "");
+  const next = normalizeText(content.value.toString() ?? "");
   const current = normalizeText(el.innerText);
   if (current === next) return;
 

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

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

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

@@ -10,7 +10,7 @@ $radius-size: sass.fn-naming-var("radius-size");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$gesture-indicator} {
-  background-color: rgb(#{$gesture-indicator-border-color});
+  background-color: rgba(#{$gesture-indicator-border-color});
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,

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

@@ -1,7 +1,7 @@
 <style lang="scss" src="./gesture-indicator.scss" scoped></style>
 <template src="./gesture-indicator.html"></template>
 <script lang="ts" setup>
-import { withPrefix } from "../../utils";
+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";
@@ -21,9 +21,9 @@ const gestureIndicatorAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "gesture-indicator"]),
-      withPrefix(["role", role]),
-      withPrefix("gesture-indicator"),
+      cssPrefix(["layer", "gesture-indicator"]),
+      cssPrefix(["role", role]),
+      cssPrefix("gesture-indicator"),
       props.placement,
     ],
   };

package/src/components/image/image.vue

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

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

@@ -2,7 +2,7 @@
 <template src="./flex.html"></template>
 <script lang="ts" setup>
 import { computed } from "vue";
-import { withPrefix, property } from "../../../utils";
+import { cssPrefix, cssProperty } from "../../../utils";
 import type { FlexProps } from "./flex.type";
 
 // Component setup (props, emits, injects)
@@ -16,18 +16,18 @@ const props = withDefaults(defineProps<FlexProps>(), {
 const flexAttrs = computed(() => {
   const style = props.options.map((option) => {
     return {
-      [property(["flex", "gap", option?.breakpoint || ""])]:
+      [cssProperty(["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,
+      [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: [withPrefix("flex")],
+    class: [cssPrefix("flex")],
     style,
   };
 });

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

@@ -2,7 +2,7 @@
 <template src="./flex-item.html"></template>
 <script lang="ts" setup>
 import { computed } from "vue";
-import { withPrefix, property } from "../../../utils";
+import { cssPrefix, cssProperty } from "../../../utils";
 import type { FlexItemProps } from "./flex-item.type";
 
 const props = withDefaults(defineProps<FlexItemProps>(), {
@@ -12,15 +12,15 @@ const props = withDefaults(defineProps<FlexItemProps>(), {
 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,
+      [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: [withPrefix("flex-item")],
+    class: [cssPrefix("flex-item")],
     style,
   };
 });

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

@@ -2,7 +2,7 @@
 <template src="./grid.html"></template>
 <script lang="ts" setup>
 import { computed } from "vue";
-import { withPrefix, property } from "../../../utils";
+import { cssPrefix, cssProperty } from "../../../utils";
 import type { GridProps } from "./grid.type";
 
 // Component setup (props, emits, injects)
@@ -16,16 +16,16 @@ const props = withDefaults(defineProps<GridProps>(), {
 const gridAttrs = computed(() => {
   const style = props.options.map((option) => {
     return {
-      [property(["grid", "gap", option?.breakpoint || ""])]:
+      [cssProperty(["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,
+      [cssProperty(["grid", "columns", option?.breakpoint || ""])]: option.columns,
+      [cssProperty(["grid", "rows", option?.breakpoint || ""])]: option.rows,
+      [cssProperty(["grid", "auto-flow", option?.breakpoint || ""])]: option.autoFlow,
     };
   });
 
   return {
-    class: [withPrefix("grid")],
+    class: [cssPrefix("grid")],
     style,
   };
 });

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

@@ -2,7 +2,7 @@
 <template src="./grid-item.html"></template>
 <script lang="ts" setup>
 import { computed } from "vue";
-import { withPrefix, property } from "../../../utils";
+import { cssPrefix, cssProperty } from "../../../utils";
 import type { GridItemProps } from "./grid-item.type";
 
 const props = withDefaults(defineProps<GridItemProps>(), {
@@ -12,15 +12,15 @@ const props = withDefaults(defineProps<GridItemProps>(), {
 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,
+      [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: [withPrefix("grid-item")],
+    class: [cssPrefix("grid-item")],
     style,
   };
 });

package/src/components/modal/modal.scss

@@ -19,7 +19,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
 $border-radius: calc(min(#{$viewport-width}, #{$radius-size}) * #{$radius-ratio});
 
 .#{$modal} {
-  background: rgb(#{$modal-background-color});
+  background: rgba(#{$modal-background-color});
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,