@toife/vue 3.1.4 → 3.1.6

package/src/components/tabs/tabs/tabs.scss

@@ -12,7 +12,31 @@ $tabs-underline-color-active: sass.fn-naming-var("tabs", "underline", "color", "
 $tabs-underline-color-hover: sass.fn-naming-var("tabs", "underline", "color", "hover");
 $tabs-underline-color-focus: sass.fn-naming-var("tabs", "underline", "color", "focus");
 $tabs-underline-color-disabled: sass.fn-naming-var("tabs", "underline", "color", "disabled");
-$tabs-underline-background-color: sass.fn-naming-var("tabs", "underline", "background-color");
+$tabs-underline-border-color: sass.fn-naming-var("tabs", "underline", "border-color");
+$tabs-underline-border-color-active: sass.fn-naming-var(
+  "tabs",
+  "underline",
+  "border-color",
+  "active"
+);
+$tabs-underline-border-color-hover: sass.fn-naming-var(
+  "tabs",
+  "underline",
+  "border-color",
+  "hover"
+);
+$tabs-underline-border-color-focus: sass.fn-naming-var(
+  "tabs",
+  "underline",
+  "border-color",
+  "focus"
+);
+$tabs-underline-border-color-disabled: sass.fn-naming-var(
+  "tabs",
+  "underline",
+  "border-color",
+  "disabled"
+);
 
 // Fill
 $tabs-fill-color: sass.fn-naming-var("tabs", "fill", "color");
@@ -20,7 +44,6 @@ $tabs-fill-color-active: sass.fn-naming-var("tabs", "fill", "color", "active");
 $tabs-fill-color-hover: sass.fn-naming-var("tabs", "fill", "color", "hover");
 $tabs-fill-color-focus: sass.fn-naming-var("tabs", "fill", "color", "focus");
 $tabs-fill-color-disabled: sass.fn-naming-var("tabs", "fill", "color", "disabled");
-
 $tabs-fill-background-color: sass.fn-naming-var("tabs", "fill", "background-color");
 $tabs-fill-background-color-active: sass.fn-naming-var(
   "tabs",
@@ -36,6 +59,11 @@ $tabs-fill-background-color-disabled: sass.fn-naming-var(
   "background-color",
   "disabled"
 );
+$tabs-fill-border-color: sass.fn-naming-var("tabs", "fill", "border-color");
+$tabs-fill-border-color-active: sass.fn-naming-var("tabs", "fill", "border-color", "active");
+$tabs-fill-border-color-hover: sass.fn-naming-var("tabs", "fill", "border-color", "hover");
+$tabs-fill-border-color-focus: sass.fn-naming-var("tabs", "fill", "border-color", "focus");
+$tabs-fill-border-color-disabled: sass.fn-naming-var("tabs", "fill", "border-color", "disabled");
 
 // Text
 $tabs-text-color: sass.fn-naming-var("tabs", "text", "color");
@@ -46,7 +74,7 @@ $tabs-text-color-disabled: sass.fn-naming-var("tabs", "text", "color", "disabled
 
 $radius-ratio: sass.fn-naming-var("radius-ratio");
 $border-width: sass.fn-naming-var("stroke", "width");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 $radius-size: sass.fn-naming-var("radius-size");
 // layer: highlight (indicator geometry)
 $highlight-top: sass.fn-naming-var("tabs", "highlight", "top");
@@ -63,31 +91,29 @@ $highlight-space-y: sass.fn-naming-var("tabs", "highlight", "space-y");
   margin: 0;
   list-style: none;
   border: none;
-  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;
+  overflow-y: hidden;
+  overflow-x: hidden;
 
   > * {
     z-index: 1;
   }
 
-  &::before {
-    content: "";
-    z-index: 1;
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: #{$highlight-width};
-    height: #{$highlight-height};
-    transform: translate(#{$highlight-left}, #{$highlight-top});
-    box-sizing: border-box;
-    border-radius: calc(
-      min(#{$highlight-width}, #{$highlight-height}, #{$radius-size}) * #{$radius-ratio}
-    );
+  &:not(.text) {
+    &::before {
+      content: "";
+      z-index: 1;
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: #{$highlight-width};
+      height: #{$highlight-height};
+      transform: translate(#{$highlight-left}, #{$highlight-top});
+      box-sizing: border-box;
+      border-radius: calc(
+        min(#{$highlight-width}, #{$highlight-height}, #{$radius-size}) * #{$radius-ratio}
+      );
+    }
   }
 
   &.top-start,
@@ -123,6 +149,7 @@ $highlight-space-y: sass.fn-naming-var("tabs", "highlight", "space-y");
     width: 100%;
     padding-top: #{$highlight-space-y};
     padding-bottom: #{$highlight-space-y};
+    overflow-x: auto;
 
     > * {
       height: 100%;
@@ -140,6 +167,7 @@ $highlight-space-y: sass.fn-naming-var("tabs", "highlight", "space-y");
     flex-direction: column;
     width: fit-content;
     height: 100%;
+    overflow-y: auto;
 
     > * {
       width: 100%;
@@ -148,38 +176,39 @@ $highlight-space-y: sass.fn-naming-var("tabs", "highlight", "space-y");
 
   &.underline {
     &::before {
-      background-color: rgb(#{$tabs-underline-background-color});
+      background-color: rgba(#{$tabs-underline-border-color-active});
     }
 
     :deep(.#{$tab}) {
       .#{$button} {
-        color: rgb(#{$tabs-underline-color});
+        color: rgba(#{$tabs-underline-color});
+        background-color: transparent !important;
       }
 
       &.active {
         .#{$button} {
-          color: rgb(#{$tabs-underline-color-active});
+          color: rgba(#{$tabs-underline-color-active});
         }
       }
 
       &:hover,
       &.hover {
         .#{$button} {
-          color: rgb(#{$tabs-underline-color-hover});
+          color: rgba(#{$tabs-underline-color-hover});
         }
       }
 
       &:focus,
       &.focus {
         .#{$button} {
-          color: rgb(#{$tabs-underline-color-focus});
+          color: rgba(#{$tabs-underline-color-focus});
         }
       }
 
       &:disabled,
       &.disabled {
         .#{$button} {
-          color: rgb(#{$tabs-underline-color-disabled});
+          color: rgba(#{$tabs-underline-color-disabled});
         }
       }
     }
@@ -187,83 +216,92 @@ $highlight-space-y: sass.fn-naming-var("tabs", "highlight", "space-y");
 
   &.fill {
     &::before {
-      background-color: rgb(#{$tabs-fill-background-color});
+      background-color: rgba(#{$tabs-fill-background-color-active});
     }
 
     :deep(.#{$tab}) {
       .#{$button} {
-        color: rgb(#{$tabs-fill-color});
+        color: rgba(#{$tabs-fill-color});
+        background-color: rgba(#{$tabs-fill-background-color});
       }
 
       &.active {
         .#{$button} {
-          color: rgb(#{$tabs-fill-color-active});
+          color: rgba(#{$tabs-fill-color-active});
+          background-color: transparent !important;
         }
       }
 
       &:hover,
       &.hover {
         .#{$button} {
-          color: rgb(#{$tabs-fill-color-hover});
+          color: rgba(#{$tabs-fill-color-hover});
+          background-color: rgba(#{$tabs-fill-background-color-hover});
         }
       }
 
       &:focus,
       &.focus {
         .#{$button} {
-          color: rgb(#{$tabs-fill-color-focus});
+          color: rgba(#{$tabs-fill-color-focus});
+          background-color: rgba(#{$tabs-fill-background-color-focus});
         }
       }
 
       &:disabled,
       &.disabled {
         .#{$button} {
-          color: rgb(#{$tabs-fill-color-disabled});
+          color: rgba(#{$tabs-fill-color-disabled});
+          background-color: rgba(#{$tabs-fill-background-color-disabled});
         }
       }
     }
   }
 
   &.text {
-    &::before {
-      display: none;
-    }
-
     :deep(.#{$tab}) {
       .#{$button} {
-        color: rgb(#{$tabs-text-color});
+        color: rgba(#{$tabs-text-color});
+        background-color: transparent;
       }
 
       &.active {
         .#{$button} {
-          color: rgb(#{$tabs-text-color-active});
+          color: rgba(#{$tabs-text-color-active});
         }
       }
 
       &:hover,
       &.hover {
         .#{$button} {
-          color: rgb(#{$tabs-text-color-hover});
+          color: rgba(#{$tabs-text-color-hover});
         }
       }
 
       &:focus,
       &.focus {
         .#{$button} {
-          color: rgb(#{$tabs-text-color-focus});
+          color: rgba(#{$tabs-text-color-focus});
         }
       }
 
       &:disabled,
       &.disabled {
         .#{$button} {
-          color: rgb(#{$tabs-text-color-disabled});
+          color: rgba(#{$tabs-text-color-disabled});
         }
       }
     }
   }
 
   &.transition {
+    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;
+
     &::before {
       transition:
         background-color #{$transition-duration} ease,
@@ -276,10 +314,6 @@ $highlight-space-y: sass.fn-naming-var("tabs", "highlight", "space-y");
     }
 
     :deep(.#{$tab}) {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
       .#{$button} {
         transition:
           box-shadow #{$transition-duration} ease,
@@ -297,13 +331,7 @@ $highlight-space-y: sass.fn-naming-var("tabs", "highlight", "space-y");
     align-items: center;
 
     .#{$button} {
-      color: unset;
       cursor: pointer;
-      background-color: transparent !important;
-      border: none !important;
-      box-shadow: none !important;
-      border-radius: 0 !important;
-      transition: none;
     }
   }
 }

package/src/components/tabs/tabs/tabs.type.ts

@@ -1,6 +1,7 @@
 import { ComputedRef } from "vue";
 
 export type TabsVariant = "fill" | "underline" | "text";
+export type TabsSize = string;
 export type TabsPlacement =
   | "top-start"
   | "top-end"
@@ -17,10 +18,11 @@ export type TabsProps = {
   variant?: TabsVariant;
   role?: string;
   modelValue?: string;
-  border?: number;
+  border?: number[];
   margin?: number[];
   shape?: string;
   transition?: boolean;
+  size?: TabsSize;
 };
 
 export type TabsEmit = {
@@ -31,5 +33,6 @@ export type TabsProviderState = {
   activeValue: ComputedRef<string>;
   role: ComputedRef<string>;
   shape: ComputedRef<string>;
+  size: ComputedRef<TabsSize>;
   setValue: (val: string) => void;
 };

package/src/components/tabs/tabs/tabs.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, nextTick, onMounted, onUnmounted, provide, ref, watch } from "vue";
 import { type TabsProps, type TabsEmit, type TabsProviderState } from "./tabs.type";
-import { property, withPrefix } from "../../../utils";
+import { cssProperty, cssPrefix } from "../../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
 import { TABS_PROVIDER_STATE_KEY } from "./tabs.constants";
 
@@ -12,8 +12,9 @@ import { TABS_PROVIDER_STATE_KEY } from "./tabs.constants";
 const props = withDefaults(defineProps<TabsProps>(), {
   placement: "top-start",
   margin: () => [0, 0],
-  border: 2,
+  border: () => [2, 0],
   transition: true,
+  size: "standard",
 });
 const emit = defineEmits<TabsEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
@@ -25,6 +26,7 @@ const height = ref(0);
 const top = ref(0);
 const left = ref(0);
 const container = ref();
+const isFirstRender = ref(true);
 
 // Computed properties
 // ----------------------------------------------------------------------------
@@ -36,6 +38,10 @@ const shape = computed(() => {
   return props.shape || appState?.shape.value || "";
 });
 
+const size = computed(() => {
+  return props.size;
+});
+
 const activeValue = computed(() => {
   return props.modelValue || "";
 });
@@ -54,7 +60,7 @@ const tabsAttrs = computed(() => {
   if (props.variant === "underline") {
     // Underline variant: align the highlight strip for top vs bottom tab bars
     if (props.placement.startsWith("top-")) {
-      t = h - props.border;
+      t = h - props.border[0];
     }
 
     if (props.placement.startsWith("bottom-")) {
@@ -62,12 +68,17 @@ const tabsAttrs = computed(() => {
     }
 
     if (props.placement.startsWith("top-") || props.placement.startsWith("bottom-")) {
-      h = props.border + 0.5;
+      h = props.border[0] + 0.5;
+
+      if (props.border[1]) {
+        l += (w - props.border[1]) / 2;
+        w = props.border[1];
+      }
     }
 
     // Left, Right
     if (props.placement.startsWith("left-")) {
-      l = w - props.border;
+      l = w - props.border[0];
     }
 
     if (props.placement.startsWith("right-")) {
@@ -75,29 +86,34 @@ const tabsAttrs = computed(() => {
     }
 
     if (props.placement.startsWith("left-") || props.placement.startsWith("right-")) {
-      w = props.border;
+      w = props.border[0];
+
+      if (props.border[1]) {
+        t += (h - props.border[1]) / 2;
+        h = props.border[1];
+      }
     }
   }
 
   return {
     class: [
-      withPrefix(["layer", "tabs"]),
-      withPrefix(["role", role.value]),
-      withPrefix(["shape", shape.value]),
-      withPrefix("tabs"),
+      cssPrefix(["layer", "tabs"]),
+      cssPrefix(["role", role.value]),
+      cssPrefix(["shape", shape.value]),
+      cssPrefix("tabs"),
       props.variant,
       props.placement,
       {
-        transition: props.transition,
+        transition: isFirstRender.value ? false : props.transition,
       },
     ],
     style: {
-      [property("tabs-highlight-top")]: typeof t === "string" ? t : t + "px",
-      [property("tabs-highlight-left")]: typeof l === "string" ? l : l + "px",
-      [property("tabs-highlight-width")]: typeof w === "string" ? w : w + "px",
-      [property("tabs-highlight-height")]: typeof h === "string" ? h : h + "px",
-      [property("tabs-highlight-space-x")]: (props.margin[1] > 0 ? props.margin[1] : 0) + "px",
-      [property("tabs-highlight-space-y")]: (props.margin[0] > 0 ? props.margin[0] : 0) + "px",
+      [cssProperty("tabs-highlight-top")]: typeof t === "string" ? t : t + "px",
+      [cssProperty("tabs-highlight-left")]: typeof l === "string" ? l : l + "px",
+      [cssProperty("tabs-highlight-width")]: typeof w === "string" ? w : w + "px",
+      [cssProperty("tabs-highlight-height")]: typeof h === "string" ? h : h + "px",
+      [cssProperty("tabs-highlight-space-x")]: (props.margin[1] > 0 ? props.margin[1] : 0) + "px",
+      [cssProperty("tabs-highlight-space-y")]: (props.margin[0] > 0 ? props.margin[0] : 0) + "px",
     },
   };
 });
@@ -120,20 +136,27 @@ const calcPosition = () => {
   }
 };
 
+const checkRender = async () => {
+  await nextTick();
+  calcPosition();
+};
+
 // Lifecycle
 // ----------------------------------------------------------------------------
 watch(
   () => props.modelValue,
-  async () => {
-    await nextTick();
-    calcPosition();
+  () => {
+    checkRender();
   }
 );
 
-onMounted(async () => {
-  await nextTick();
-  calcPosition();
+onMounted(() => {
+  checkRender();
   window.addEventListener("resize", calcPosition);
+
+  setTimeout(() => {
+    isFirstRender.value = false;
+  }, 500);
 });
 
 onUnmounted(() => {
@@ -146,6 +169,7 @@ provide<TabsProviderState>(TABS_PROVIDER_STATE_KEY, {
   activeValue,
   role,
   shape,
+  size,
   setValue: (val: unknown) => {
     emit("update:modelValue", val as string);
   },

package/src/components/toast/toast/toast.scss

@@ -17,7 +17,7 @@ $safe-area-top: sass.fn-naming-var("safe-area", "top");
   height: fit-content;
   max-width: #{$max-width};
   position: absolute;
-  z-index: 999;
+  z-index: 10000;
   font-size: 0.8em;
   line-height: 0.8em;
   display: flex;

package/src/components/toast/toast/toast.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 import { type ToastProps } from "../toast.type";
-import { withPrefix } from "../../../utils";
+import { cssPrefix } from "../../../utils";
 import { useToast } from "../toast.composable";
 import { ToastContent } from "../toast-content";
 
@@ -18,7 +18,7 @@ const toast = useToast();
 // ----------------------------------------------------------------------------
 const toastAttrs = computed(() => {
   return {
-    class: [withPrefix("toast"), props.placement],
+    class: [cssPrefix("toast"), props.placement],
   };
 });
 

package/src/components/toast/toast-content/toast-content.scss

@@ -9,7 +9,7 @@ $toast-color: sass.fn-naming-var("toast", "color");
 $toast-border-color: sass.fn-naming-var("toast", "border-color");
 
 $space-x: sass.fn-naming-var("spacing", "x");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 $radius-ratio: sass.fn-naming-var("radius-ratio");
 $radius-size: sass.fn-naming-var("radius-size");
 $border-width: sass.fn-naming-var("stroke", "width");
@@ -26,9 +26,9 @@ $max-height: sass.fn-naming-var("overlay", "max-height");
     border-radius #{$transition-duration} ease,
     opacity #{$transition-duration} ease;
 
-  background-color: rgb(#{$toast-background-color});
-  color: rgb(#{$toast-color});
-  border-color: rgb(#{$toast-border-color});
+  background-color: rgba(#{$toast-background-color});
+  color: rgba(#{$toast-color});
+  border-color: rgba(#{$toast-border-color});
   border-width: #{$border-width};
   border-style: solid;
   max-height: #{$max-height};

package/src/components/toast/toast-content/toast-content.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, onMounted, ref } from "vue";
 import { type ToastContentProps, type ToastContentEmit } from "../toast.type";
-import { withPrefix } from "../../../utils";
+import { cssPrefix } from "../../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
 
 // Component setup (props, emits, injects)
@@ -27,10 +27,10 @@ const contentAttrs = computed(() => {
   const shape = props.shape || appState?.shape.value || "";
   return {
     class: [
-      withPrefix(["layer", "toast"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape]),
-      withPrefix("toast-content"),
+      cssPrefix(["layer", "toast"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
+      cssPrefix("toast-content"),
       props.variant,
       {
         closing: isClosing.value,

package/src/components/toolbar/toolbar.scss

@@ -11,14 +11,14 @@ $safe-area-right: sass.fn-naming-var("safe-area", "right");
 $safe-area-left: sass.fn-naming-var("safe-area", "left");
 $safe-area-bottom: sass.fn-naming-var("safe-area", "bottom");
 $safe-area-top: sass.fn-naming-var("safe-area", "top");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 $border-width: sass.fn-naming-var("stroke", "width");
-$border: #{$border-width} solid rgb(#{$toolbar-border-color});
+$border: #{$border-width} solid rgba(#{$toolbar-border-color});
 
 .#{$toolbar} {
-  background-color: rgb(#{$toolbar-background-color});
-  color: rgb(#{$toolbar-color});
+  background-color: rgba(#{$toolbar-background-color});
+  color: rgba(#{$toolbar-color});
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,

package/src/components/toolbar/toolbar.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject } from "vue";
 import { type ToolbarProps } from "./toolbar.type";
-import { property, withPrefix } from "../../utils";
+import { cssProperty, cssPrefix } from "../../utils";
 import { type CableProviderState } from "../cable/cable.type";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 import { CABLE_PROVIDER_STATE_KEY } from "../cable";
@@ -27,13 +27,13 @@ const toolbarAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "toolbar"]),
-      withPrefix(["role", role]),
-      withPrefix("toolbar"),
+      cssPrefix(["layer", "toolbar"]),
+      cssPrefix(["role", role]),
+      cssPrefix("toolbar"),
       placement,
       {
         safe: props.safe,
-        divider: divider.value,
+        divider: divider,
       },
     ],
   };