@toife/vue 3.1.6 → 3.2.0

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

@@ -1,5 +0,0 @@
-// Type definitions
-export type TabProps = {
-  value?: string;
-  disabled?: boolean;
-};

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

@@ -1,40 +0,0 @@
-<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 { cssPrefix } from "../../../utils";
-import { type TabsProviderState, TABS_PROVIDER_STATE_KEY } from "../tabs";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<TabProps>(), {
-  disabled: false,
-});
-const tabsState = inject<TabsProviderState>(TABS_PROVIDER_STATE_KEY);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-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: [
-      cssPrefix("tab"),
-      {
-        active: isActive.value,
-      },
-    ],
-  };
-});
-
-// Methods
-// ----------------------------------------------------------------------------
-const handleClick = () => {
-  if (props.disabled) return;
-  tabsState?.setValue(props.value || "");
-};
-</script>

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

@@ -1,10 +0,0 @@
-export { default as Tabs } from "./tabs.vue";
-export type {
-  TabsProps,
-  TabsEmit,
-  TabsProviderState,
-  TabsVariant,
-  TabsPlacement,
-  TabsSize,
-} from "./tabs.type";
-export { TABS_PROVIDER_STATE_KEY } from "./tabs.constants";

package/src/components/tabs/tabs/tabs.constants.ts

@@ -1 +0,0 @@
-export const TABS_PROVIDER_STATE_KEY = "tabs-state";

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

@@ -1,3 +0,0 @@
-<ul ref="container" v-bind="tabsAttrs">
-  <slot />
-</ul>

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

@@ -1,337 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$tabs: sass.fn-naming-prefix("tabs");
-$tab: sass.fn-naming-prefix("tab");
-$button: sass.fn-naming-prefix("button");
-
-// Property name - layer: tabs
-// 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("duration");
-$radius-size: sass.fn-naming-var("radius-size");
-// layer: highlight (indicator geometry)
-$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;
-  align-items: center;
-  position: relative;
-  margin: 0;
-  list-style: none;
-  border: none;
-  overflow-y: hidden;
-  overflow-x: hidden;
-
-  > * {
-    z-index: 1;
-  }
-
-  &: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,
-  &.bottom-start,
-  &.left-start,
-  &.right-start {
-    justify-content: flex-start;
-  }
-
-  &.top-end,
-  &.bottom-end,
-  &.left-end,
-  &.right-end {
-    justify-content: flex-end;
-  }
-
-  &.top-center,
-  &.bottom-center,
-  &.left-center,
-  &.right-center {
-    justify-content: center;
-  }
-
-  // Direction
-  &.top-start,
-  &.top-center,
-  &.top-end,
-  &.bottom-start,
-  &.bottom-center,
-  &.bottom-end {
-    flex-direction: row;
-    height: fit-content;
-    width: 100%;
-    padding-top: #{$highlight-space-y};
-    padding-bottom: #{$highlight-space-y};
-    overflow-x: auto;
-
-    > * {
-      height: 100%;
-    }
-  }
-
-  &.left-start,
-  &.left-center,
-  &.left-end,
-  &.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%;
-    }
-  }
-
-  &.underline {
-    &::before {
-      background-color: rgba(#{$tabs-underline-border-color-active});
-    }
-
-    :deep(.#{$tab}) {
-      .#{$button} {
-        color: rgba(#{$tabs-underline-color});
-        background-color: transparent !important;
-      }
-
-      &.active {
-        .#{$button} {
-          color: rgba(#{$tabs-underline-color-active});
-        }
-      }
-
-      &:hover,
-      &.hover {
-        .#{$button} {
-          color: rgba(#{$tabs-underline-color-hover});
-        }
-      }
-
-      &:focus,
-      &.focus {
-        .#{$button} {
-          color: rgba(#{$tabs-underline-color-focus});
-        }
-      }
-
-      &: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: rgba(#{$tabs-fill-color-active});
-          background-color: transparent !important;
-        }
-      }
-
-      &:hover,
-      &.hover {
-        .#{$button} {
-          color: rgba(#{$tabs-fill-color-hover});
-          background-color: rgba(#{$tabs-fill-background-color-hover});
-        }
-      }
-
-      &: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 {
-    :deep(.#{$tab}) {
-      .#{$button} {
-        color: rgba(#{$tabs-text-color});
-        background-color: transparent;
-      }
-
-      &.active {
-        .#{$button} {
-          color: rgba(#{$tabs-text-color-active});
-        }
-      }
-
-      &:hover,
-      &.hover {
-        .#{$button} {
-          color: rgba(#{$tabs-text-color-hover});
-        }
-      }
-
-      &: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,
-        color #{$transition-duration} ease,
-        border-color #{$transition-duration} ease,
-        border-radius #{$transition-duration} ease,
-        transform #{$transition-duration} ease,
-        width #{$transition-duration} ease,
-        height #{$transition-duration} ease;
-    }
-
-    :deep(.#{$tab}) {
-      .#{$button} {
-        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;
-      }
-    }
-  }
-
-  :deep(.#{$tab}) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .#{$button} {
-      cursor: pointer;
-    }
-  }
-}

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

@@ -1,38 +0,0 @@
-import { ComputedRef } from "vue";
-
-export type TabsVariant = "fill" | "underline" | "text";
-export type TabsSize = string;
-export type TabsPlacement =
-  | "top-start"
-  | "top-end"
-  | "bottom-start"
-  | "bottom-end"
-  | "left-start"
-  | "left-end"
-  | "right-start"
-  | "right-end";
-
-// Type definitions
-export type TabsProps = {
-  placement?: TabsPlacement;
-  variant?: TabsVariant;
-  role?: string;
-  modelValue?: string;
-  border?: number[];
-  margin?: number[];
-  shape?: string;
-  transition?: boolean;
-  size?: TabsSize;
-};
-
-export type TabsEmit = {
-  (e: "update:modelValue", value: string): void;
-};
-
-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

@@ -1,177 +0,0 @@
-<style lang="scss" src="./tabs.scss" scoped></style>
-<template src="./tabs.html"></template>
-<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 { cssProperty, cssPrefix } from "../../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
-import { TABS_PROVIDER_STATE_KEY } from "./tabs.constants";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<TabsProps>(), {
-  placement: "top-start",
-  margin: () => [0, 0],
-  border: () => [2, 0],
-  transition: true,
-  size: "standard",
-});
-const emit = defineEmits<TabsEmit>();
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const width = ref(0);
-const height = ref(0);
-const top = ref(0);
-const left = ref(0);
-const container = ref();
-const isFirstRender = ref(true);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const role = computed(() => {
-  return props.role || appState?.role.value || "";
-});
-
-const shape = computed(() => {
-  return props.shape || appState?.shape.value || "";
-});
-
-const size = computed(() => {
-  return props.size;
-});
-
-const activeValue = computed(() => {
-  return props.modelValue || "";
-});
-
-const tabsAttrs = computed(() => {
-  let l = left.value;
-  let t = top.value;
-  let w = width.value;
-  let h = height.value;
-
-  t = t - props.margin[0];
-  l = l - props.margin[1];
-  h = h + props.margin[0] * 2;
-  w = w + props.margin[1] * 2;
-
-  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[0];
-    }
-
-    if (props.placement.startsWith("bottom-")) {
-      t = 0;
-    }
-
-    if (props.placement.startsWith("top-") || props.placement.startsWith("bottom-")) {
-      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[0];
-    }
-
-    if (props.placement.startsWith("right-")) {
-      l = 0;
-    }
-
-    if (props.placement.startsWith("left-") || props.placement.startsWith("right-")) {
-      w = props.border[0];
-
-      if (props.border[1]) {
-        t += (h - props.border[1]) / 2;
-        h = props.border[1];
-      }
-    }
-  }
-
-  return {
-    class: [
-      cssPrefix(["layer", "tabs"]),
-      cssPrefix(["role", role.value]),
-      cssPrefix(["shape", shape.value]),
-      cssPrefix("tabs"),
-      props.variant,
-      props.placement,
-      {
-        transition: isFirstRender.value ? false : props.transition,
-      },
-    ],
-    style: {
-      [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",
-    },
-  };
-});
-
-// Methods
-// ----------------------------------------------------------------------------
-const calcPosition = () => {
-  let active = container.value.querySelector(".active");
-  if (active) {
-    width.value = active.offsetWidth;
-    height.value = active.offsetHeight;
-    left.value =
-      active.getBoundingClientRect().left -
-      container.value.getBoundingClientRect().left +
-      container.value.scrollLeft;
-    top.value =
-      active.getBoundingClientRect().top -
-      container.value.getBoundingClientRect().top +
-      container.value.scrollTop;
-  }
-};
-
-const checkRender = async () => {
-  await nextTick();
-  calcPosition();
-};
-
-// Lifecycle
-// ----------------------------------------------------------------------------
-watch(
-  () => props.modelValue,
-  () => {
-    checkRender();
-  }
-);
-
-onMounted(() => {
-  checkRender();
-  window.addEventListener("resize", calcPosition);
-
-  setTimeout(() => {
-    isFirstRender.value = false;
-  }, 500);
-});
-
-onUnmounted(() => {
-  window.removeEventListener("resize", calcPosition);
-});
-
-// Provide / expose (public API)
-// ----------------------------------------------------------------------------
-provide<TabsProviderState>(TABS_PROVIDER_STATE_KEY, {
-  activeValue,
-  role,
-  shape,
-  size,
-  setValue: (val: unknown) => {
-    emit("update:modelValue", val as string);
-  },
-});
-</script>

package/src/components/toast/index.ts

@@ -1,4 +0,0 @@
-export * from "./toast";
-export * from "./toast-content";
-export * from "./toast.composable";
-export * from "./toast.type";

package/src/components/toast/toast/index.ts

@@ -1 +0,0 @@
-export { default as Toast } from "./toast.vue";

package/src/components/toast/toast/toast.html

@@ -1,9 +0,0 @@
-<div v-bind="toastAttrs" v-if="toastMessages.length > 0">
-  <slot name="content">
-    <ToastContent
-      v-for="(msg, index) in toastMessages"
-      v-bind="msg"
-      @close="dismiss(msg.id)"
-    ></ToastContent>
-  </slot>
-</div>

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

@@ -1,61 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$toast: sass.fn-naming-prefix("toast");
-$toastContent: sass.fn-naming-prefix("toast-content");
-
-// Properties
-$max-width: sass.fn-naming-var("overlay", "max-width");
-$space-x: sass.fn-naming-var("spacing", "x");
-$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");
-
-.#{$toast} {
-  width: fit-content;
-  height: fit-content;
-  max-width: #{$max-width};
-  position: absolute;
-  z-index: 10000;
-  font-size: 0.8em;
-  line-height: 0.8em;
-  display: flex;
-  flex-direction: column;
-  gap: #{$space-x};
-
-  &.bottom-start {
-    bottom: calc(#{$safe-area-bottom} + #{$space-x} * 4);
-    left: calc(#{$space-x} * 4);
-  }
-
-  &.bottom-center {
-    bottom: calc(#{$safe-area-bottom} + #{$space-x} * 4);
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  &.bottom-end {
-    bottom: calc(#{$safe-area-bottom} + #{$space-x} * 4);
-    right: calc(#{$space-x} * 4);
-  }
-
-  &.top-start {
-    top: calc(#{$safe-area-top} + #{$space-x} * 4);
-    left: calc(#{$space-x} * 4);
-    flex-direction: column-reverse;
-  }
-
-  &.top-center {
-    top: calc(#{$safe-area-top} + #{$space-x} * 4);
-    left: 50%;
-    transform: translateX(-50%);
-    flex-direction: column-reverse;
-  }
-
-  &.top-end {
-    top: calc(#{$safe-area-top} + #{$space-x} * 4);
-    right: calc(#{$space-x} * 4);
-    flex-direction: column-reverse;
-  }
-}