@toife/vue 3.1.5 → 3.2.0

package/src/components/switch/switch.scss

@@ -1,128 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Classes
-$switch: sass.fn-naming-prefix("switch");
-$switch-icon: sass.fn-naming-prefix("switch-icon");
-$switch-wrapper: sass.fn-naming-prefix("switch-wrapper");
-
-// Property name - layer: switch (track + thumb; states like button + inactive)
-$switch-background-color-off: sass.fn-naming-var("switch", "background-color", "off");
-$switch-background-color-on: sass.fn-naming-var("switch", "background-color", "on");
-$switch-background-color-disabled: sass.fn-naming-var("switch", "background-color", "disabled");
-
-$switch-color-on: sass.fn-naming-var("switch", "color", "on");
-$switch-color-off: sass.fn-naming-var("switch", "color", "off");
-$switch-color-disabled: sass.fn-naming-var("switch", "color", "disabled");
-
-$switch-box-shadow-color-focus: sass.fn-naming-var("switch", "box-shadow-color", "focus");
-
-$transition-duration: sass.fn-naming-var("motion", "duration");
-$radius-ratio: sass.fn-naming-var("radius-ratio");
-$spacing-x: sass.fn-naming-var("spacing", "x");
-$size-control-mark-size: sass.fn-naming-var("control-mark-size");
-$radius-size: sass.fn-naming-var("radius-size");
-$icon-size: calc(#{$size-control-mark-size} - #{$size-control-mark-size} * 0.2);
-$bounce-ratio: sass.fn-naming-var("switch", "bounce", "ratio");
-
-.#{$switch-wrapper} {
-  display: inline-flex;
-  gap: calc(#{$spacing-x} * 2);
-  align-items: center;
-  cursor: pointer;
-  box-shadow: none !important;
-
-  &.transition {
-    .#{$switch},
-    .#{$switch-icon} {
-      transition:
-        background-color #{$transition-duration} ease,
-        color #{$transition-duration} ease,
-        border-color #{$transition-duration} ease,
-        border-radius #{$transition-duration} ease,
-        box-shadow #{$transition-duration} ease,
-        transform #{$transition-duration} ease;
-    }
-  }
-
-  .#{$switch} {
-    height: #{$size-control-mark-size};
-    aspect-ratio: 14/8;
-    position: relative;
-    border-radius: calc(min(#{$size-control-mark-size}, #{$radius-size}) * #{$radius-ratio});
-
-    .#{$switch-icon} {
-      width: #{$icon-size};
-      height: #{$icon-size};
-      position: absolute;
-      top: 0;
-      border-radius: calc(min(#{$icon-size}, #{$radius-size}) * #{$radius-ratio});
-      margin: calc(#{$size-control-mark-size} * 0.1);
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-
-    .#{$switch} {
-      background-color: rgba(#{$switch-background-color-disabled});
-      cursor: not-allowed;
-      opacity: 0.3;
-
-      .#{$switch-icon} {
-        background-color: rgba(#{$switch-color-disabled});
-      }
-    }
-  }
-
-  &.readonly {
-    cursor: default;
-
-    .#{$switch} {
-      cursor: default;
-    }
-  }
-
-  &:not(.on) {
-    .#{$switch} {
-      background-color: rgba(#{$switch-background-color-off});
-
-      .#{$switch-icon} {
-        background-color: rgba(#{$switch-color-off});
-        left: 0;
-      }
-    }
-  }
-
-  &.on {
-    .#{$switch} {
-      background-color: rgba(#{$switch-background-color-on});
-
-      .#{$switch-icon} {
-        right: 0;
-        animation: shrink #{$transition-duration} linear;
-        animation-fill-mode: forwards;
-        background-color: rgba(#{$switch-color-on});
-      }
-    }
-  }
-
-  &.focus {
-    &.shadow {
-      .#{$switch} {
-        box-shadow: 0 0 0 0.25rem rgba(#{$switch-box-shadow-color-focus}, 0.25);
-      }
-    }
-  }
-}
-
-@keyframes shrink {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(#{$bounce-ratio});
-  }
-  100% {
-    transform: scale(1);
-  }
-}

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

@@ -1,19 +0,0 @@
-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 = {
-  (e: "update:modelValue", value: boolean): void;
-};

package/src/components/switch/switch.vue

@@ -1,97 +0,0 @@
-<style lang="scss" src="./switch.scss" scoped></style>
-<template src="./switch.html"></template>
-<script lang="ts" setup>
-import { computed, inject, ref, onMounted } from "vue";
-import type { SwitchProps, SwitchEmit } from "./switch.type";
-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);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const isFocused = ref(false);
-const isFirstRender = ref(true);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const switchWrapperAttrs = computed(() => {
-  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
-  return {
-    class: [
-      cssPrefix("switch-wrapper"),
-      {
-        disabled: props.disabled,
-        readonly: props.readonly,
-        shadow: shadow && !props.disabled && isFocused.value,
-        focus: isFocused.value,
-        on: props.modelValue,
-      },
-      {
-        transition: isFirstRender.value ? false : true,
-      },
-    ],
-    style: {
-      [cssProperty(["switch", "bounce", "ratio"])]: props.bounce,
-    },
-  };
-});
-
-const switchAttrs = computed(() => {
-  const shape = props.shape || appState?.shape.value || "";
-  const baseRole = appState?.role.value || "";
-  const role = props.role || baseRole;
-  return {
-    class: [
-      cssPrefix(["layer", "switch"]),
-      cssPrefix(["role", role]),
-      cssPrefix(["shape", shape]),
-      cssPrefix(["size", props.size]),
-      cssPrefix("switch"),
-    ],
-  };
-});
-
-const switchIconAttrs = {
-  class: [cssPrefix("switch-icon")],
-} as const;
-
-// Methods
-// ----------------------------------------------------------------------------
-const onSwitch = () => {
-  if (props.disabled || props.readonly) return;
-  emit("update:modelValue", !props.modelValue);
-};
-
-const onFocus = () => {
-  if (props.disabled || props.readonly) return;
-  isFocused.value = true;
-};
-
-const onBlur = () => {
-  if (props.disabled || props.readonly) return;
-  isFocused.value = false;
-};
-
-const onKeydown = (e: KeyboardEvent) => {
-  if (e.key !== " " && e.key !== "Enter") return;
-  e.preventDefault();
-  onSwitch();
-};
-
-onMounted(() => {
-  setTimeout(() => {
-    isFirstRender.value = false;
-  }, 500);
-});
-</script>

package/src/components/tabs/index.ts

@@ -1,2 +0,0 @@
-export * from "./tabs";
-export * from "./tab";

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

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

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

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

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

@@ -1,13 +0,0 @@
-@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.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,341 +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("motion", "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}) {
-      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} {
-      cursor: pointer;
-    }
-  }
-}