@toife/vue 2.2.0 → 3.0.0

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

@@ -0,0 +1,2 @@
+export { default as Tab } from "./tab.vue";
+export type { TabProps } from "./tab.type";

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

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

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

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

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

@@ -0,0 +1,38 @@
+<template src="./tab.html"></template>
+<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 { type TabsProviderState, TABS_PROVIDER_STATE_KEY } from "../tabs";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<TabProps>(), {
+  disabled: false,
+});
+const tabsState = inject<TabsProviderState>(TABS_PROVIDER_STATE_KEY);
+
+/// Computed
+/// ------------------------------------------------------------
+const role = computed(() => tabsState?.role.value || "");
+const shape = computed(() => tabsState?.shape.value || "");
+const isActive = computed(() => tabsState?.activeValue.value === props.value);
+const tabAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix("tab"),
+      {
+        active: isActive.value,
+      },
+    ],
+  };
+});
+
+/// Methods
+/// ------------------------------------------------------------
+const handleClick = () => {
+  if (props.disabled) return;
+  tabsState?.setValue(props.value || "");
+};
+</script>

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

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

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

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

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

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

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

@@ -0,0 +1,272 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$tabs: sass.fn-naming-prefix("tabs");
+$tab: sass.fn-naming-prefix("tab");
+$button: sass.fn-naming-prefix("button");
+
+// Property name
+$space-x: sass.fn-naming-var("spacing", "x");
+$space-y: sass.fn-naming-var("spacing", "y");
+
+// layer: item
+$button-color: sass.fn-naming-var("item", "color");
+$border-radius: sass.fn-naming-var("border-radius");
+$border-width: sass.fn-naming-var("stroke", "width");
+$border-color: sass.fn-naming-var("surface", "border-color");
+
+$transition-duration: sass.fn-naming-var("motion", "duration");
+$background-color: sass.fn-naming-var("item", "background-color");
+$color: sass.fn-naming-var("item", "color");
+$color-base: sass.fn-naming-var("base", "color");
+
+$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");
+
+.#{$tabs} {
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin: 0;
+  list-style: none;
+  border: #{$border-width} solid transparent;
+  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;
+
+  > * {
+    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(#{$background-color});
+    border-radius: #{$border-radius};
+  }
+
+  &.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%;
+
+    > * {
+      height: 100%;
+    }
+  }
+
+  &.left-start,
+  &.left-center,
+  &.left-end,
+  &.right-start,
+  &.right-center,
+  &.right-end {
+    flex-direction: column;
+    width: fit-content;
+    height: 100%;
+
+    > * {
+      width: 100%;
+    }
+  }
+
+  &.divider {
+    &.top-start,
+    &.top-center,
+    &.top-end {
+      border-bottom-color: rgb(#{$border-color});
+    }
+
+    &.bottom-start,
+    &.bottom-center,
+    &.bottom-end {
+      border-top-color: rgb(#{$border-color});
+    }
+
+    &.left-start,
+    &.left-center,
+    &.left-end {
+      border-right-color: rgb(#{$border-color});
+    }
+
+    &.right-start,
+    &.right-center,
+    &.right-end {
+      border-left-color: rgb(#{$border-color});
+    }
+  }
+
+  &.underline {
+    &.top-start,
+    &.top-center,
+    &.top-end,
+    &.bottom-start,
+    &.bottom-center,
+    &.bottom-end {
+      padding-top: #{$highlight-space-y};
+      padding-bottom: #{$highlight-space-y};
+    }
+
+    &.left-start,
+    &.left-center,
+    &.left-end,
+    &.right-start,
+    &.right-center,
+    &.right-end {
+      padding-left: #{$highlight-space-x};
+      padding-right: #{$highlight-space-x};
+    }
+  }
+
+  &.fill {
+    :deep(.#{$tab}) {
+      &.active {
+        .#{$button} {
+          color: rgb(#{$button-color}) !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});
+    }
+
+    &.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});
+    }
+  }
+
+  &.text {
+    &::before {
+      display: none;
+    }
+
+    :deep(.#{$tab}) {
+      &.active {
+        .#{$button} {
+          color: rgb(#{$background-color});
+          text-shadow: 0 0 rgb(#{$background-color});
+        }
+      }
+    }
+
+    &.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});
+    }
+
+    &.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});
+    }
+  }
+
+  &.transition {
+    &::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}) {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .#{$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} {
+      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

@@ -0,0 +1,36 @@
+import { ComputedRef } from "vue";
+
+export type TabsVariant = "fill" | "underline" | "text";
+export type TabsPlacement =
+  | "top-start"
+  | "top-end"
+  | "bottom-start"
+  | "bottom-end"
+  | "left-start"
+  | "left-end"
+  | "right-start"
+  | "right-end";
+
+// Define
+export type TabsProps = {
+  placement?: TabsPlacement;
+  variant?: TabsVariant;
+  role?: string;
+  modelValue?: string;
+  border?: number;
+  margin?: number[];
+  shape?: string;
+  divider?: boolean;
+  transition?: boolean;
+};
+
+export type TabsEmit = {
+  (e: "update:modelValue", value: string): void;
+};
+
+export type TabsProviderState = {
+  activeValue: ComputedRef<string>;
+  role: ComputedRef<string>;
+  shape: ComputedRef<string>;
+  setValue: (val: string) => void;
+};

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

@@ -0,0 +1,159 @@
+<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 { property, withPrefix } from "../../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
+import { TABS_PROVIDER_STATE_KEY } from "./tabs.constants";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<TabsProps>(), {
+  placement: "top-start",
+  margin: () => [0, 0],
+  border: 2,
+  divider: undefined,
+  transition: true,
+});
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+const emit = defineEmits<TabsEmit>();
+
+/// State
+/// ------------------------------------------------------------
+const width = ref(0);
+const height = ref(0);
+const top = ref(0);
+const left = ref(0);
+const container = ref();
+
+/// Computed
+/// ------------------------------------------------------------
+const role = computed(() => {
+  return props.role || appState?.role.value || "";
+});
+
+const shape = computed(() => {
+  return props.shape || appState?.shape.value || "";
+});
+
+const activeValue = computed(() => {
+  return props.modelValue || "";
+});
+
+const divider = computed(() => {
+  return (props.divider !== undefined ? props.divider : appState?.divider.value || false) ?? false;
+});
+
+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") {
+    /// Top, Bottom
+    if (props.placement.startsWith("top-")) {
+      t = h - props.border;
+    }
+
+    if (props.placement.startsWith("bottom-")) {
+      t = 0;
+    }
+
+    if (props.placement.startsWith("top-") || props.placement.startsWith("bottom-")) {
+      h = props.border + 0.5;
+    }
+
+    // Left, Right
+    if (props.placement.startsWith("left-")) {
+      l = w - props.border;
+    }
+
+    if (props.placement.startsWith("right-")) {
+      l = 0;
+    }
+
+    if (props.placement.startsWith("left-") || props.placement.startsWith("right-")) {
+      w = props.border;
+    }
+  }
+
+  return {
+    class: [
+      withPrefix(["layer", "item"]),
+      withPrefix(["role", role.value]),
+      withPrefix(["shape", shape.value]),
+      withPrefix("tabs"),
+      props.variant,
+      props.placement,
+      {
+        divider: divider.value,
+        transition: props.transition,
+      },
+    ],
+    style: {
+      [property("highlight-top")]: typeof t === "string" ? t : t + "px",
+      [property("highlight-left")]: typeof l === "string" ? l : l + "px",
+      [property("highlight-width")]: typeof w === "string" ? w : w + "px",
+      [property("highlight-height")]: typeof h === "string" ? h : h + "px",
+      [property("highlight-space-x")]: (props.margin[1] > 0 ? props.margin[1] : 0) + "px",
+      [property("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;
+  }
+};
+
+// Lifecycle
+/// ------------------------------------------------------------
+watch(
+  () => props.modelValue,
+  async () => {
+    await nextTick();
+    calcPosition();
+  }
+);
+
+onMounted(async () => {
+  await nextTick();
+  calcPosition();
+  window.addEventListener("resize", calcPosition);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", calcPosition);
+});
+
+// Export, Expose
+/// ------------------------------------------------------------
+provide<TabsProviderState>(TABS_PROVIDER_STATE_KEY, {
+  activeValue,
+  role,
+  shape,
+  setValue: (val: unknown) => {
+    emit("update:modelValue", val as string);
+  },
+});
+</script>

package/src/components/toast/index.ts

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

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

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

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

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

@@ -0,0 +1,61 @@
+@use "@toife/sass-layer-generator" 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: 999;
+  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;
+  }
+}

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

@@ -0,0 +1,34 @@
+<style lang="scss" src="./toast.scss" scoped></style>
+<template src="./toast.html"></template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { type ToastProps } from "../toast.type";
+import { withPrefix } from "../../../utils";
+import { useToast } from "../toast.composable";
+import { ToastContent } from "../toast-content";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<ToastProps>(), {
+  placement: "bottom-end",
+});
+const toast = useToast();
+
+/// Computed
+/// ------------------------------------------------------------
+const toastAttrs = computed(() => {
+  return {
+    class: [withPrefix("toast"), props.placement],
+  };
+});
+
+const toastMessages = computed(() => {
+  return toast.messages.value.filter((item) => item.placement == props.placement);
+});
+
+/// Methods
+/// ------------------------------------------------------------
+const dismiss = (id: number) => {
+  toast.close(id);
+};
+</script>

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

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

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

@@ -0,0 +1 @@
+<div v-bind="contentAttrs">{{ props.message }}</div>