@toife/vue 3.1.5 → 3.2.0

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

@@ -1,39 +0,0 @@
-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"
-  | "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: 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

@@ -1,34 +0,0 @@
-<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 { cssPrefix } from "../../../utils";
-import { useToast } from "../toast.composable";
-import { ToastContent } from "../toast-content";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<ToastProps>(), {
-  placement: "bottom-end",
-});
-const toast = useToast();
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const toastAttrs = computed(() => {
-  return {
-    class: [cssPrefix("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

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

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

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

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

@@ -1,42 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$toastContent: sass.fn-naming-prefix("toast-content");
-
-// Property name - layer: toast
-$toast-background-color: sass.fn-naming-var("toast", "background-color");
-$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");
-$radius-ratio: sass.fn-naming-var("radius-ratio");
-$radius-size: sass.fn-naming-var("radius-size");
-$border-width: sass.fn-naming-var("stroke", "width");
-$max-height: sass.fn-naming-var("overlay", "max-height");
-
-.#{$toastContent} {
-  width: fit-content;
-  height: fit-content;
-  opacity: 1;
-  transition:
-    background-color #{$transition-duration} ease,
-    color #{$transition-duration} ease,
-    border-color #{$transition-duration} ease,
-    border-radius #{$transition-duration} ease,
-    opacity #{$transition-duration} ease;
-
-  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};
-  max-width: 100%;
-  padding: calc(#{$space-x} * 2) calc(#{$space-x} * 4);
-  border-radius: calc(min(#{$radius-size}, #{$max-height}) * #{$radius-ratio});
-
-  &.closing {
-    opacity: 0;
-  }
-}

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

@@ -1,53 +0,0 @@
-<style lang="scss" src="./toast-content.scss" scoped></style>
-<template src="./toast-content.html"></template>
-<script lang="ts" setup>
-import { computed, inject, onMounted, ref } from "vue";
-import { type ToastContentProps, type ToastContentEmit } from "../toast.type";
-import { cssPrefix } from "../../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<ToastContentProps>(), {
-  message: "",
-  duration: 2000,
-  variant: "fill",
-});
-const emit = defineEmits<ToastContentEmit>();
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const isClosing = ref(false);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const contentAttrs = computed(() => {
-  const role = props.role || appState?.role.value || "";
-  const shape = props.shape || appState?.shape.value || "";
-  return {
-    class: [
-      cssPrefix(["layer", "toast"]),
-      cssPrefix(["role", role]),
-      cssPrefix(["shape", shape]),
-      cssPrefix("toast-content"),
-      props.variant,
-      {
-        closing: isClosing.value,
-      },
-    ],
-  };
-});
-
-// Lifecycle
-// ----------------------------------------------------------------------------
-onMounted(() => {
-  setTimeout(() => {
-    isClosing.value = true;
-
-    setTimeout(() => {
-      emit("close");
-    }, 500);
-  }, props.duration);
-});
-</script>

package/src/components/toast/toast.composable.ts

@@ -1,22 +0,0 @@
-import { ref } from "vue";
-import type { ToastContentProps } from "./toast.type";
-
-// Queue of active toast payloads (each open() appends with a monotonic id)
-const messages = ref<ToastContentProps[]>([]);
-const messageId = ref(1);
-
-export const useToast = () => {
-  const open = (message: ToastContentProps) => {
-    messages.value.push({ ...message, id: messageId.value++ });
-  };
-
-  const close = (id: number) => {
-    messages.value = messages.value.filter((item) => item.id !== id);
-  };
-
-  return {
-    messages,
-    open,
-    close,
-  };
-};

package/src/components/toast/toast.type.ts

@@ -1,25 +0,0 @@
-export type ToastPlacement =
-  | "bottom-start"
-  | "bottom-center"
-  | "bottom-end"
-  | "top-start"
-  | "top-center"
-  | "top-end";
-
-export type ToastContentVariant = "fill" | "text";
-
-export type ToastProps = {
-  placement: ToastPlacement;
-};
-
-export type ToastContentProps = {
-  id?: number;
-  message: string;
-  duration?: number;
-  role?: string;
-  variant?: ToastContentVariant;
-  placement?: ToastPlacement;
-  shape?: string;
-};
-
-export type ToastContentEmit = { (e: "close"): void };

package/src/components/toolbar/index.ts

@@ -1,2 +0,0 @@
-export { default as Toolbar } from "./toolbar.vue";
-export type { ToolbarProps } from "./toolbar.type";

package/src/components/toolbar/toolbar.html

@@ -1,3 +0,0 @@
-<div v-bind="toolbarAttrs">
-  <slot />
-</div>

package/src/components/toolbar/toolbar.scss

@@ -1,64 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$toolbar: sass.fn-naming-prefix("toolbar");
-
-// Property name - layer: toolbar
-$toolbar-background-color: sass.fn-naming-var("toolbar", "background-color");
-$toolbar-color: sass.fn-naming-var("toolbar", "color");
-$toolbar-border-color: sass.fn-naming-var("toolbar", "border-color");
-$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");
-
-$border-width: sass.fn-naming-var("stroke", "width");
-$border: #{$border-width} solid rgba(#{$toolbar-border-color});
-
-.#{$toolbar} {
-  background-color: rgba(#{$toolbar-background-color});
-  color: rgba(#{$toolbar-color});
-  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;
-
-  &.safe {
-    &.right {
-      padding-right: #{$safe-area-right};
-    }
-
-    &.left {
-      padding-left: #{$safe-area-left};
-    }
-
-    &.bottom {
-      padding-bottom: #{$safe-area-bottom};
-    }
-
-    &.top {
-      padding-top: #{$safe-area-top};
-    }
-  }
-
-  &.divider {
-    &.bottom {
-      border-top: #{$border};
-    }
-
-    &.top {
-      border-bottom: #{$border};
-    }
-
-    &.left {
-      border-right: #{$border};
-    }
-
-    &.right {
-      border-left: #{$border};
-    }
-  }
-}

package/src/components/toolbar/toolbar.type.ts

@@ -1,7 +0,0 @@
-// Type definitions
-export type ToolbarProps = {
-  placement?: string | null;
-  safe?: boolean;
-  role?: string;
-  divider?: boolean;
-};

package/src/components/toolbar/toolbar.vue

@@ -1,41 +0,0 @@
-<style lang="scss" src="./toolbar.scss" scoped></style>
-<template src="./toolbar.html"></template>
-<script lang="ts" setup>
-import { computed, inject } from "vue";
-import { type ToolbarProps } from "./toolbar.type";
-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";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<ToolbarProps>(), {
-  placement: null,
-  safe: true,
-  divider: undefined,
-});
-const cable = inject<CableProviderState>(CABLE_PROVIDER_STATE_KEY);
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const toolbarAttrs = computed(() => {
-  const role = props.role || appState?.role.value || "";
-  const placement = props.placement || cable?.placement.value || "";
-  const divider = (props?.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
-
-  return {
-    class: [
-      cssPrefix(["layer", "toolbar"]),
-      cssPrefix(["role", role]),
-      cssPrefix("toolbar"),
-      placement,
-      {
-        safe: props.safe,
-        divider: divider,
-      },
-    ],
-  };
-});
-</script>

package/src/env.d.ts

@@ -1,7 +0,0 @@
-// Vue SFC module typings for this package and for consumers (source is built in their app).
-// Intentionally no "vite/client" so projects without Vite still typecheck.
-declare module "*.vue" {
-  import type { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}