@toife/vue 3.1.3 → 3.1.5

package/src/components/switch/switch.type.ts

@@ -1,11 +1,17 @@
+import { AppSize } from "../app";
+
+export type SwitchSize = AppSize;
+
 // Type definitions
 export type SwitchProps = {
   modelValue?: boolean;
   role?: string;
+  size?: SwitchSize;
   shape?: string;
   disabled?: boolean;
   readonly?: boolean;
   shadow?: boolean;
+  bounce?: number | string;
 };
 
 export type SwitchEmit = {

package/src/components/switch/switch.vue

@@ -1,17 +1,19 @@
 <style lang="scss" src="./switch.scss" scoped></style>
 <template src="./switch.html"></template>
 <script lang="ts" setup>
-import { computed, inject, ref } from "vue";
+import { computed, inject, ref, onMounted } from "vue";
 import type { SwitchProps, SwitchEmit } from "./switch.type";
-import { withPrefix } from "../../utils";
+import { cssPrefix, cssProperty } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
 // ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<SwitchProps>(), {
   modelValue: false,
+  size: "standard",
   readonly: false,
   shadow: undefined,
+  bounce: 1.5,
 });
 const emit = defineEmits<SwitchEmit>();
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
@@ -19,6 +21,7 @@ const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 // Reactive state
 // ----------------------------------------------------------------------------
 const isFocused = ref(false);
+const isFirstRender = ref(true);
 
 // Computed properties
 // ----------------------------------------------------------------------------
@@ -26,7 +29,7 @@ const switchWrapperAttrs = computed(() => {
   const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
   return {
     class: [
-      withPrefix("switch-wrapper"),
+      cssPrefix("switch-wrapper"),
       {
         disabled: props.disabled,
         readonly: props.readonly,
@@ -34,7 +37,13 @@ const switchWrapperAttrs = computed(() => {
         focus: isFocused.value,
         on: props.modelValue,
       },
+      {
+        transition: isFirstRender.value ? false : true,
+      },
     ],
+    style: {
+      [cssProperty(["switch", "bounce", "ratio"])]: props.bounce,
+    },
   };
 });
 
@@ -44,16 +53,17 @@ const switchAttrs = computed(() => {
   const role = props.role || baseRole;
   return {
     class: [
-      withPrefix(["layer", "switch"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape]),
-      withPrefix("switch"),
+      cssPrefix(["layer", "switch"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
+      cssPrefix(["size", props.size]),
+      cssPrefix("switch"),
     ],
   };
 });
 
 const switchIconAttrs = {
-  class: [withPrefix("switch-icon")],
+  class: [cssPrefix("switch-icon")],
 } as const;
 
 // Methods
@@ -78,4 +88,10 @@ const onKeydown = (e: KeyboardEvent) => {
   e.preventDefault();
   onSwitch();
 };
+
+onMounted(() => {
+  setTimeout(() => {
+    isFirstRender.value = false;
+  }, 500);
+});
 </script>

package/src/components/tabs/tab/tab.html

@@ -1,5 +1,5 @@
 <li v-bind="tabAttrs">
-  <CustomButton block :role="role" :shape="shape" @click="handleClick">
+  <CustomButton block :role="role" :shape="shape" :size="size" @click="handleClick">
     <slot />
   </CustomButton>
 </li>

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

@@ -0,0 +1,13 @@
+@use "@toife/sass-layer" as sass;
+
+$button: sass.fn-naming-prefix("button");
+
+.#{$button} {
+  background-color: none;
+  border: none;
+
+  &:focus,
+  &:active {
+    outline: none;
+  }
+}

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

@@ -1,9 +1,10 @@
 <template src="./tab.html"></template>
+<style lang="scss" src="./tab.scss" scoped></style>
 <script lang="ts" setup>
 import { computed, inject } from "vue";
 import { Button as CustomButton } from "../../button";
 import { type TabProps } from "./tab.type";
-import { withPrefix } from "../../../utils";
+import { cssPrefix } from "../../../utils";
 import { type TabsProviderState, TABS_PROVIDER_STATE_KEY } from "../tabs";
 
 // Component setup (props, emits, injects)
@@ -17,11 +18,12 @@ const tabsState = inject<TabsProviderState>(TABS_PROVIDER_STATE_KEY);
 // ----------------------------------------------------------------------------
 const role = computed(() => tabsState?.role.value || "");
 const shape = computed(() => tabsState?.shape.value || "");
+const size = computed(() => tabsState?.size.value || "standard");
 const isActive = computed(() => tabsState?.activeValue.value === props.value);
 const tabAttrs = computed(() => {
   return {
     class: [
-      withPrefix("tab"),
+      cssPrefix("tab"),
       {
         active: isActive.value,
       },

package/src/components/tabs/tabs/index.ts

@@ -5,5 +5,6 @@ export type {
   TabsProviderState,
   TabsVariant,
   TabsPlacement,
+  TabsSize,
 } from "./tabs.type";
 export { TABS_PROVIDER_STATE_KEY } from "./tabs.constants";

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

@@ -6,23 +6,83 @@ $tab: sass.fn-naming-prefix("tab");
 $button: sass.fn-naming-prefix("button");
 
 // Property name - layer: tabs
-$tabs-color: sass.fn-naming-var("tabs", "color");
-$tabs-background-color: sass.fn-naming-var("tabs", "background-color");
-$tabs-border-color: sass.fn-naming-var("tabs", "border-color");
-
-$space-x: sass.fn-naming-var("spacing", "x");
-$space-y: sass.fn-naming-var("spacing", "y");
-$border-radius: sass.fn-naming-var("border-radius");
+// Underline
+$tabs-underline-color: sass.fn-naming-var("tabs", "underline", "color");
+$tabs-underline-color-active: sass.fn-naming-var("tabs", "underline", "color", "active");
+$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-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");
+$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",
+  "fill",
+  "background-color",
+  "active"
+);
+$tabs-fill-background-color-hover: sass.fn-naming-var("tabs", "fill", "background-color", "hover");
+$tabs-fill-background-color-focus: sass.fn-naming-var("tabs", "fill", "background-color", "focus");
+$tabs-fill-background-color-disabled: sass.fn-naming-var(
+  "tabs",
+  "fill",
+  "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");
+$tabs-text-color-active: sass.fn-naming-var("tabs", "text", "color", "active");
+$tabs-text-color-hover: sass.fn-naming-var("tabs", "text", "color", "hover");
+$tabs-text-color-focus: sass.fn-naming-var("tabs", "text", "color", "focus");
+$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");
-
+$radius-size: sass.fn-naming-var("radius-size");
 // layer: highlight (indicator geometry)
-$highlight-top: sass.fn-naming-var("highlight", "top");
-$highlight-left: sass.fn-naming-var("highlight", "left");
-$highlight-width: sass.fn-naming-var("highlight", "width");
-$highlight-height: sass.fn-naming-var("highlight", "height");
-$highlight-space-x: sass.fn-naming-var("highlight", "space-x");
-$highlight-space-y: sass.fn-naming-var("highlight", "space-y");
+$highlight-top: sass.fn-naming-var("tabs", "highlight", "top");
+$highlight-left: sass.fn-naming-var("tabs", "highlight", "left");
+$highlight-width: sass.fn-naming-var("tabs", "highlight", "width");
+$highlight-height: sass.fn-naming-var("tabs", "highlight", "height");
+$highlight-space-x: sass.fn-naming-var("tabs", "highlight", "space-x");
+$highlight-space-y: sass.fn-naming-var("tabs", "highlight", "space-y");
 
 .#{$tabs} {
   display: flex;
@@ -31,30 +91,29 @@ $highlight-space-y: sass.fn-naming-var("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;
-    background-color: rgb(#{$tabs-background-color});
-    border-radius: #{$border-radius};
+  &: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,
@@ -88,6 +147,9 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     flex-direction: row;
     height: fit-content;
     width: 100%;
+    padding-top: #{$highlight-space-y};
+    padding-bottom: #{$highlight-space-y};
+    overflow-x: auto;
 
     > * {
       height: 100%;
@@ -100,129 +162,146 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
   &.right-start,
   &.right-center,
   &.right-end {
+    padding-left: #{$highlight-space-x};
+    padding-right: #{$highlight-space-x};
     flex-direction: column;
     width: fit-content;
     height: 100%;
+    overflow-y: auto;
 
     > * {
       width: 100%;
     }
   }
 
-  &.divider {
-    &.top-start,
-    &.top-center,
-    &.top-end {
-      border-bottom: #{$border-width} solid rgb(#{$tabs-border-color});
+  &.underline {
+    &::before {
+      background-color: rgba(#{$tabs-underline-border-color-active});
     }
 
-    &.bottom-start,
-    &.bottom-center,
-    &.bottom-end {
-      border-top: #{$border-width} solid rgb(#{$tabs-border-color});
-    }
+    :deep(.#{$tab}) {
+      .#{$button} {
+        color: rgba(#{$tabs-underline-color});
+        background-color: transparent !important;
+      }
 
-    &.left-start,
-    &.left-center,
-    &.left-end {
-      border-right: #{$border-width} solid rgb(#{$tabs-border-color});
-    }
+      &.active {
+        .#{$button} {
+          color: rgba(#{$tabs-underline-color-active});
+        }
+      }
 
-    &.right-start,
-    &.right-center,
-    &.right-end {
-      border-left: #{$border-width} solid rgb(#{$tabs-border-color});
-    }
-  }
+      &:hover,
+      &.hover {
+        .#{$button} {
+          color: rgba(#{$tabs-underline-color-hover});
+        }
+      }
 
-  &.underline {
-    &.top-start,
-    &.top-center,
-    &.top-end,
-    &.bottom-start,
-    &.bottom-center,
-    &.bottom-end {
-      padding-top: #{$highlight-space-y};
-      padding-bottom: #{$highlight-space-y};
-    }
+      &:focus,
+      &.focus {
+        .#{$button} {
+          color: rgba(#{$tabs-underline-color-focus});
+        }
+      }
 
-    &.left-start,
-    &.left-center,
-    &.left-end,
-    &.right-start,
-    &.right-center,
-    &.right-end {
-      padding-left: #{$highlight-space-x};
-      padding-right: #{$highlight-space-x};
+      &:disabled,
+      &.disabled {
+        .#{$button} {
+          color: rgba(#{$tabs-underline-color-disabled});
+        }
+      }
     }
   }
 
   &.fill {
+    &::before {
+      background-color: rgba(#{$tabs-fill-background-color-active});
+    }
+
     :deep(.#{$tab}) {
+      .#{$button} {
+        color: rgba(#{$tabs-fill-color});
+        background-color: rgba(#{$tabs-fill-background-color});
+      }
+
       &.active {
         .#{$button} {
-          color: rgb(#{$tabs-color}) !important;
+          color: rgba(#{$tabs-fill-color-active});
+          background-color: transparent !important;
         }
       }
-    }
 
-    &.top-start,
-    &.top-center,
-    &.top-end,
-    &.bottom-start,
-    &.bottom-center,
-    &.bottom-end {
-      padding-top: calc(#{$highlight-space-y} + #{$space-y});
-      padding-bottom: calc(#{$highlight-space-y} + #{$space-y});
-    }
+      &:hover,
+      &.hover {
+        .#{$button} {
+          color: rgba(#{$tabs-fill-color-hover});
+          background-color: rgba(#{$tabs-fill-background-color-hover});
+        }
+      }
 
-    &.left-start,
-    &.left-center,
-    &.left-end,
-    &.right-start,
-    &.right-center,
-    &.right-end {
-      padding-left: calc(#{$highlight-space-x} + #{$space-x});
-      padding-right: calc(#{$highlight-space-x} + #{$space-x});
+      &:focus,
+      &.focus {
+        .#{$button} {
+          color: rgba(#{$tabs-fill-color-focus});
+          background-color: rgba(#{$tabs-fill-background-color-focus});
+        }
+      }
+
+      &:disabled,
+      &.disabled {
+        .#{$button} {
+          color: rgba(#{$tabs-fill-color-disabled});
+          background-color: rgba(#{$tabs-fill-background-color-disabled});
+        }
+      }
     }
   }
 
   &.text {
-    &::before {
-      display: none;
-    }
-
     :deep(.#{$tab}) {
+      .#{$button} {
+        color: rgba(#{$tabs-text-color});
+        background-color: transparent;
+      }
+
       &.active {
         .#{$button} {
-          color: rgb(#{$tabs-background-color});
-          text-shadow: 0 0 rgb(#{$tabs-background-color});
+          color: rgba(#{$tabs-text-color-active});
         }
       }
-    }
 
-    &.top-start,
-    &.top-center,
-    &.top-end,
-    &.bottom-start,
-    &.bottom-center,
-    &.bottom-end {
-      padding-top: calc(#{$highlight-space-y} + #{$space-y});
-      padding-bottom: calc(#{$highlight-space-y} + #{$space-y});
-    }
+      &:hover,
+      &.hover {
+        .#{$button} {
+          color: rgba(#{$tabs-text-color-hover});
+        }
+      }
 
-    &.left-start,
-    &.left-center,
-    &.left-end,
-    &.right-start,
-    &.right-center,
-    &.right-end {
-      padding-left: calc(#{$highlight-space-x} + #{$space-x});
-      padding-right: calc(#{$highlight-space-x} + #{$space-x});
+      &:focus,
+      &.focus {
+        .#{$button} {
+          color: rgba(#{$tabs-text-color-focus});
+        }
+      }
+
+      &:disabled,
+      &.disabled {
+        .#{$button} {
+          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,
@@ -256,14 +335,7 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     align-items: center;
 
     .#{$button} {
-      padding: #{$space-y} calc(#{$space-x} * 4);
-      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,8 @@
 import { ComputedRef } from "vue";
+import { AppSize } from "../../app";
 
 export type TabsVariant = "fill" | "underline" | "text";
+export type TabsSize = AppSize;
 export type TabsPlacement =
   | "top-start"
   | "top-end"
@@ -17,11 +19,11 @@ export type TabsProps = {
   variant?: TabsVariant;
   role?: string;
   modelValue?: string;
-  border?: number;
+  border?: number[];
   margin?: number[];
   shape?: string;
-  divider?: boolean;
   transition?: boolean;
+  size?: TabsSize;
 };
 
 export type TabsEmit = {
@@ -32,5 +34,6 @@ export type TabsProviderState = {
   activeValue: ComputedRef<string>;
   role: ComputedRef<string>;
   shape: ComputedRef<string>;
+  size: ComputedRef<TabsSize>;
   setValue: (val: string) => void;
 };