@toife/vue 3.1.6 → 3.2.0

package/src/components/radio/radio/radio.scss

@@ -1,142 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Classes
-$radio: sass.fn-naming-prefix("radio");
-$radio-icon: sass.fn-naming-prefix("radio-icon");
-
-// Properties - layer: item
-$radio-background-color-hover: sass.fn-naming-var("radio", "background-color", "hover");
-$radio-background-color-focus: sass.fn-naming-var("radio", "background-color", "focus");
-$radio-background-color-unchecked: sass.fn-naming-var("radio", "background-color", "unchecked");
-$radio-background-color-checked: sass.fn-naming-var("radio", "background-color", "checked");
-$radio-background-color-disabled: sass.fn-naming-var("radio", "background-color", "disabled");
-
-$radio-color-unchecked: sass.fn-naming-var("radio", "color", "unchecked");
-$radio-color-checked: sass.fn-naming-var("radio", "color", "checked");
-$radio-color-hover: sass.fn-naming-var("radio", "color", "hover");
-$radio-color-focus: sass.fn-naming-var("radio", "color", "focus");
-$radio-color-disabled: sass.fn-naming-var("radio", "color", "disabled");
-
-$radio-border-color-hover: sass.fn-naming-var("radio", "border-color", "hover");
-$radio-border-color-focus: sass.fn-naming-var("radio", "border-color", "focus");
-$radio-border-color-checked: sass.fn-naming-var("radio", "border-color", "checked");
-$radio-border-color-unchecked: sass.fn-naming-var("radio", "border-color", "unchecked");
-$radio-border-color-disabled: sass.fn-naming-var("radio", "border-color", "disabled");
-
-$radio-box-shadow-color-focus: sass.fn-naming-var("radio", "box-shadow-color", "focus");
-
-$transition-duration: sass.fn-naming-var("duration");
-$radius-ratio: sass.fn-naming-var("radius-ratio");
-
-$size-control-mark-size: sass.fn-naming-var("control-mark-size");
-
-.#{$radio} {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-  box-shadow: none !important;
-
-  .#{$radio-icon} {
-    flex-shrink: 0;
-    width: #{$size-control-mark-size};
-    height: #{$size-control-mark-size};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: transparent;
-    border: 1px 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,
-      transform #{$transition-duration} ease;
-    border-radius: 50%;
-    box-sizing: border-box;
-
-    &::after {
-      content: "";
-      width: calc(#{$size-control-mark-size} * 0.5);
-      height: calc(#{$size-control-mark-size} * 0.5);
-      border-radius: 50%;
-      background-color: rgba(#{$radio-color-unchecked});
-      transform: scale(0);
-      transform-origin: center;
-      transition:
-        transform #{$transition-duration} ease,
-        background-color #{$transition-duration} ease,
-        color #{$transition-duration} ease,
-        border-color #{$transition-duration} ease;
-    }
-  }
-
-  &:not(.on) {
-    .#{$radio-icon} {
-      background-color: transparent;
-      border-color: rgba(#{$radio-border-color-unchecked});
-    }
-
-    &:not(.disabled):not(.readonly):hover {
-      .#{$radio-icon} {
-        border-color: rgba(#{$radio-border-color-hover});
-      }
-    }
-  }
-
-  &.on {
-    &.fill {
-      .#{$radio-icon} {
-        background-color: rgba(#{$radio-background-color-checked});
-        border-color: rgba(#{$radio-border-color-checked});
-
-        &::after {
-          transform: scale(1);
-          background-color: rgba(#{$radio-color-checked});
-        }
-      }
-    }
-
-    &.outline {
-      .#{$radio-icon} {
-        border-color: rgba(#{$radio-border-color-checked});
-
-        &::after {
-          transform: scale(1);
-          background-color: rgba(#{$radio-background-color-checked});
-        }
-      }
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.3;
-
-    &.on {
-      .#{$radio-icon} {
-        background-color: rgba(#{$radio-background-color-disabled});
-        border-color: rgba(#{$radio-border-color-disabled});
-      }
-    }
-  }
-
-  &.readonly {
-    cursor: default;
-  }
-
-  &.focus {
-    &.shadow {
-      .#{$radio-icon} {
-        box-shadow: 0 0 0 0.25rem rgba(#{$radio-box-shadow-color-focus}, 0.25);
-      }
-    }
-
-    .#{$radio-icon} {
-      border-color: rgba(#{$radio-border-color-focus});
-    }
-  }
-}

package/src/components/radio/radio/radio.type.ts

@@ -1,13 +0,0 @@
-export type RadioVariant = "fill" | "outline";
-export type RadioSize = string;
-
-// Type definitions
-export type RadioProps = {
-  value: string | number;
-  role?: string;
-  size?: RadioSize;
-  variant?: RadioVariant;
-  disabled?: boolean;
-  readonly?: boolean;
-  shadow?: boolean;
-};

package/src/components/radio/radio/radio.vue

@@ -1,87 +0,0 @@
-<style lang="scss" src="./radio.scss" scoped></style>
-<template src="./radio.html"></template>
-<script lang="ts" setup>
-import { computed, inject, ref } from "vue";
-import type { RadioProps } from "./radio.type";
-import { cssPrefix } from "../../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
-import { type RadioGroupProviderState, RADIO_GROUP_PROVIDER_STATE_KEY } from "../radio-group";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<RadioProps>(), {
-  disabled: false,
-  size: "standard",
-  shadow: undefined,
-});
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-const radioGroupState = inject<RadioGroupProviderState | null>(
-  RADIO_GROUP_PROVIDER_STATE_KEY,
-  null
-);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const isFocused = ref(false);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const disabled = computed(() => {
-  return props.disabled || (radioGroupState?.disabled.value ?? false);
-});
-
-const readonly = computed(() => {
-  return props.readonly || (radioGroupState?.readonly.value ?? false);
-});
-
-const radioAttrs = computed(() => {
-  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
-  const role = props.role || radioGroupState?.role.value || appState?.role.value || "";
-  const variant = props.variant || radioGroupState?.variant.value || "";
-  const isChecked = radioGroupState?.modelValue.value === props.value;
-
-  return {
-    class: [
-      cssPrefix(["layer", "radio"]),
-      cssPrefix(["role", role]),
-      cssPrefix(["size", props.size]),
-      cssPrefix("radio"),
-      variant,
-      {
-        on: isChecked,
-        disabled: disabled.value,
-        readonly: readonly.value,
-        shadow: shadow && !props.disabled && isFocused.value,
-        focus: isFocused.value,
-      },
-    ],
-  };
-});
-
-const radioIconAttrs = {
-  class: [cssPrefix("radio-icon")],
-} as const;
-
-// Methods
-// ----------------------------------------------------------------------------
-const onRadio = () => {
-  if (disabled.value || readonly.value || !radioGroupState) return;
-  radioGroupState.setValue(props.value);
-};
-
-const onFocus = () => {
-  if (disabled.value || readonly.value) return;
-  isFocused.value = true;
-};
-
-const onBlur = () => {
-  if (disabled.value || readonly.value) return;
-  isFocused.value = false;
-};
-
-const onKeydown = (e: KeyboardEvent) => {
-  if (e.key !== " " && e.key !== "Enter") return;
-  e.preventDefault();
-  onRadio();
-};
-</script>

package/src/components/radio/radio-group/index.ts

@@ -1,7 +0,0 @@
-export { default as RadioGroup } from "./radio-group.vue";
-export type {
-  RadioGroupProps,
-  RadioGroupProviderState,
-  RadioGroupDirection,
-} from "./radio-group.type";
-export { RADIO_GROUP_PROVIDER_STATE_KEY } from "./radio-group.constants";

package/src/components/radio/radio-group/radio-group.constants.ts

@@ -1 +0,0 @@
-export const RADIO_GROUP_PROVIDER_STATE_KEY = "radio-group-state";

package/src/components/radio/radio-group/radio-group.html

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

package/src/components/radio/radio-group/radio-group.scss

@@ -1,16 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-$radio-group: sass.fn-naming-prefix("radio-group");
-
-.#{$radio-group} {
-  display: flex;
-  gap: 0.5rem;
-
-  &.horizontal {
-    flex-direction: row;
-  }
-
-  &.vertical {
-    flex-direction: column;
-  }
-}

package/src/components/radio/radio-group/radio-group.type.ts

@@ -1,28 +0,0 @@
-import type { ComputedRef } from "vue";
-import type { RadioVariant } from "../radio/radio.type";
-
-export type RadioGroupDirection = "horizontal" | "vertical";
-
-export type RadioGroupProps = {
-  modelValue?: string | number;
-  role?: string;
-  variant?: RadioVariant;
-  disabled?: boolean;
-  readonly?: boolean;
-  shadow?: boolean;
-  direction?: RadioGroupDirection;
-};
-
-export type RadioGroupEmit = {
-  (e: "update:modelValue", value: string | number): void;
-};
-
-export type RadioGroupProviderState = {
-  modelValue: ComputedRef<string | number | undefined>;
-  role: ComputedRef<string>;
-  variant: ComputedRef<RadioVariant>;
-  disabled: ComputedRef<boolean>;
-  readonly: ComputedRef<boolean>;
-  setValue: (val: string | number) => void;
-  shadow: ComputedRef<boolean>;
-};

package/src/components/radio/radio-group/radio-group.vue

@@ -1,57 +0,0 @@
-<style lang="scss" src="./radio-group.scss" scoped></style>
-<template src="./radio-group.html"></template>
-<script lang="ts" setup>
-import { computed, inject, provide } from "vue";
-import type { RadioGroupProps, RadioGroupEmit, RadioGroupProviderState } from "./radio-group.type";
-import { cssPrefix } from "../../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
-import { RADIO_GROUP_PROVIDER_STATE_KEY } from "./radio-group.constants";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<RadioGroupProps>(), {
-  disabled: false,
-  readonly: false,
-  variant: "fill",
-  direction: "vertical",
-  shadow: undefined,
-});
-const emit = defineEmits<RadioGroupEmit>();
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const modelValue = computed(() => props.modelValue);
-
-const role = computed(() => {
-  return props.role || appState?.role.value || "";
-});
-
-const variant = computed(() => {
-  return props.variant;
-});
-
-const shadow = computed(() => {
-  return (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
-});
-
-const radioGroupAttrs = computed(() => {
-  return {
-    class: [cssPrefix("radio-group"), props.direction],
-  };
-});
-
-// Provide / expose (public API)
-// ----------------------------------------------------------------------------
-provide<RadioGroupProviderState>(RADIO_GROUP_PROVIDER_STATE_KEY, {
-  modelValue,
-  role,
-  variant,
-  disabled: computed(() => props.disabled),
-  readonly: computed(() => props.readonly),
-  shadow,
-  setValue: (val: string | number) => {
-    emit("update:modelValue", val);
-  },
-});
-</script>

package/src/components/refresher/index.ts

@@ -1,2 +0,0 @@
-export { default as Refresher } from "./refresher.vue";
-export * from "./refresher.type";

package/src/components/refresher/refresher.html

@@ -1,3 +0,0 @@
-<div v-bind="containerAttrs" ref="container">
-  <slot :offset="calculateOffset" :refreshing="refreshing"></slot>
-</div>

package/src/components/refresher/refresher.scss

@@ -1,18 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class
-$container: sass.fn-naming-prefix("refresher");
-
-.#{$container} {
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  max-height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: auto;
-  overscroll-behavior: none;
-}

package/src/components/refresher/refresher.type.ts

@@ -1,16 +0,0 @@
-// Props
-export type RefresherVariant = "max" | "up";
-
-// Type definitions
-export type RefresherProps = {
-  threshold?: number;
-  variant?: RefresherVariant;
-  offset?: number;
-};
-
-export type RefresherEmit = {
-  (e: "refresh", close: () => void): void;
-  (e: "move", offset: number): void;
-  (e: "cancel"): void;
-  (e: "start"): void;
-};

package/src/components/refresher/refresher.vue

@@ -1,123 +0,0 @@
-<style lang="scss" src="./refresher.scss" scoped></style>
-<template src="./refresher.html"></template>
-<script lang="ts" setup>
-import { ref, onUnmounted, watch, computed } from "vue";
-import { gesture } from "@toife/gesture";
-import type { RefresherProps, RefresherEmit } from "./refresher.type";
-import { cssProperty, cssPrefix } from "../../utils";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<RefresherProps>(), {
-  threshold: 120,
-  variant: "max",
-  offset: undefined,
-});
-const emit = defineEmits<RefresherEmit>();
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const moveOffset = ref(0);
-const refreshing = ref(false);
-const container = ref();
-let cleanup: unknown;
-let locked = false;
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const calculateOffset = computed(() => {
-  return props.offset !== undefined ? props.offset : moveOffset.value / 2;
-});
-
-const containerAttrs = computed(() => {
-  return {
-    class: [cssPrefix("refresher")],
-  };
-});
-
-// Methods
-// ----------------------------------------------------------------------------
-const close = () => {
-  refreshing.value = false;
-  moveOffset.value = 0;
-  locked = false;
-};
-
-const start = () => {
-  locked = true;
-  refreshing.value = true;
-  moveOffset.value = props.threshold;
-  emit("refresh", close);
-};
-
-const cancel = () => {
-  moveOffset.value = 0;
-  refreshing.value = false;
-  locked = false;
-  emit("cancel");
-};
-
-// Lifecycle
-// ----------------------------------------------------------------------------
-watch(
-  () => container.value,
-  () => {
-    cleanup && (cleanup as { destroy: () => void }).destroy();
-    if (!container.value) return;
-    cleanup = gesture(
-      container.value,
-      {
-        options: {
-          minMove: 20,
-        },
-
-        beforeEvent() {
-          if (container.value.scrollTop > 0) return false;
-          return true;
-        },
-
-        down() {
-          if (refreshing.value || locked) return;
-          emit("start");
-        },
-
-        move({ deltaY, initialDirection }: unknown) {
-          if (refreshing.value || locked || initialDirection != "down") return;
-
-          const v = deltaY < 0 ? 0 : deltaY;
-          moveOffset.value = v;
-          emit("move", v);
-
-          if (props.variant == "max") {
-            if (deltaY >= props.threshold) {
-              start();
-              return;
-            }
-          }
-        },
-        up({ deltaY, initialDirection }: unknown) {
-          if (refreshing.value || locked || initialDirection != "down") return;
-
-          // max
-          if (props.variant == "up" && deltaY >= props.threshold) {
-            start();
-          } else {
-            cancel();
-          }
-        },
-        cancel() {
-          if (refreshing.value || locked) return;
-          cancel();
-        },
-      },
-      {
-        passive: false,
-      }
-    );
-  }
-);
-
-onUnmounted(() => {
-  cleanup && (cleanup as { destroy: () => void }).destroy();
-});
-</script>

package/src/components/route/index.ts

@@ -1,5 +0,0 @@
-export * from "./route-navigator";
-export * from "./route-wrapper";
-export * from "./route-provider";
-export * from "./route-outlet";
-export * from "./route.type";

package/src/components/route/route-navigator/index.ts

@@ -1,2 +0,0 @@
-export { default as RouteNavigator } from "./route-navigator.vue";
-export * from "./route-navigator.type";

package/src/components/route/route-navigator/route-navigator.html

@@ -1,19 +0,0 @@
-<div v-bind="navigatorAttrs" ref="navigatorRef">
-  <div
-    v-for="(item, index) in stack"
-    :key="item.name"
-    v-bind="componentAttrs"
-    :style="{zIndex: index * 2 + 100}"
-    :name="item.name"
-    :class="{
-      active: index === activeIndex,
-      prepare: index === activeIndex + 1,
-      back: index === activeIndex - 1,
-    }"
-  >
-    <RouteProvider :stack="item.stack">
-      <RouteOutlet :component="item.component" />
-    </RouteProvider>
-  </div>
-  <div v-bind="backdropAttrs"></div>
-</div>

package/src/components/route/route-navigator/route-navigator.scss

@@ -1,127 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Classes
-$navigator: sass.fn-naming-prefix("route-navigator");
-$navigator-component: sass.fn-naming-prefix("route-navigator-component");
-$navigator-backdrop: sass.fn-naming-prefix("route-navigator-backdrop");
-
-// Property name
-$background-color: sass.fn-naming-var("app", "background-color");
-$transition-duration: sass.fn-naming-dvar(
-  ("route-navigator-transition-duration"),
-  sass.fn-naming-var("duration")
-);
-$transform-back: sass.fn-naming-var("route-navigator-transform", "back");
-$transform-prepare: sass.fn-naming-var("route-navigator-transform", "prepare");
-$transform-active: sass.fn-naming-var("route-navigator-transform", "active");
-$backdrop-percent: sass.fn-naming-var("route-navigator-backdrop-percent");
-$backdrop-opacity: sass.fn-naming-var("backdrop", "opacity");
-$backdrop-background-color: sass.fn-naming-var("backdrop", "background-color");
-
-// Properties
-.#{$navigator} {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-wrap: nowrap;
-  overflow: hidden;
-  justify-content: flex-end;
-  position: relative;
-
-  &.right {
-    flex-direction: row;
-  }
-
-  &.left {
-    flex-direction: row-reverse;
-  }
-
-  &.up {
-    flex-direction: column;
-  }
-
-  &.down {
-    flex-direction: column-reverse;
-  }
-
-  .#{$navigator-backdrop} {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-color: rgba(#{$backdrop-background-color});
-    opacity: calc(#{$backdrop-opacity} * (#{$backdrop-percent} / 100));
-    transition: opacity #{$transition-duration} ease;
-  }
-
-  .#{$navigator-component} {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    max-width: 100%;
-    max-height: 100%;
-    top: 0;
-    left: 0;
-    flex: none;
-    background-color: rgba(#{$background-color});
-    transform: translate(0, 0);
-    transition:
-      transform #{$transition-duration} ease,
-      background-color #{$transition-duration} ease;
-
-    &.active {
-      &.right {
-        transform: translateX(#{$transform-active});
-      }
-
-      &.left {
-        transform: translateX(calc(-1 * #{$transform-active}));
-      }
-
-      &.up {
-        transform: translateY(calc(-1 * #{$transform-active}));
-      }
-
-      &.down {
-        transform: translateY(#{$transform-active});
-      }
-    }
-
-    &.prepare {
-      &.right {
-        transform: translateX(#{$transform-prepare});
-      }
-
-      &.left {
-        transform: translateX(calc(-1 * #{$transform-prepare}));
-      }
-
-      &.up {
-        transform: translateY(calc(-1 * #{$transform-prepare}));
-      }
-
-      &.down {
-        transform: translateY(#{$transform-prepare});
-      }
-    }
-
-    &.back {
-      &.right {
-        transform: translateX(#{$transform-back});
-      }
-
-      &.left {
-        transform: translateX(calc(-1 * #{$transform-back}));
-      }
-
-      &.up {
-        transform: translateY(calc(-1 * #{$transform-back}));
-      }
-
-      &.down {
-        transform: translateY(#{$transform-back});
-      }
-    }
-  }
-}