@toife/vue 3.1.5 → 3.2.0

package/src/components/present/present.vue

@@ -1,198 +0,0 @@
-<style lang="scss" src="./present.scss" scoped></style>
-<template src="./present.html"></template>
-<script lang="ts" setup>
-import type { PresentEmit, PresentProps, RenderOptions } from "./present.type";
-import { computed, onMounted, reactive, ref, watch } from "vue";
-import { cssPrefix, cssProperty } from "../../utils";
-import { usePresent } from "./present.composable";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-defineOptions({ inheritAttrs: false });
-
-const props = withDefaults(defineProps<PresentProps>(), {
-  keepalive: false,
-  visible: false,
-  backdrop: "display",
-  duration: 200,
-  placement: "bottom",
-  bounce: false,
-});
-const emit = defineEmits(["close"]) as unknown as PresentEmit;
-const presentIndex = usePresent();
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const isBounced = ref(false);
-const zIndex = ref(0);
-const isShow = ref(false);
-const styles = reactive({
-  backdropTransitionDuration: "0.2s",
-  backdropOpacity: undefined,
-  presentTransitionDuration: "0.2s",
-  presentTranslate: "0px",
-  presentOpacity: 1,
-});
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const backdropAttrs = computed(() => {
-  return {
-    class: [cssPrefix(["layer", "backdrop"]), cssPrefix("present-backdrop")],
-    style: {
-      zIndex: zIndex.value - 1,
-      [cssProperty("transition-duration")]: styles.backdropTransitionDuration,
-      [cssProperty(["backdrop", "opacity"])]:
-        props.backdrop === "transparent" ? 0 : styles.backdropOpacity,
-    },
-  };
-});
-
-// Present attributes
-const presentAttrs = computed(() => {
-  return {
-    class: [cssPrefix("present"), props.class, props.placement],
-    style: [
-      {
-        zIndex: zIndex.value,
-        [cssProperty("transition-duration")]: styles.presentTransitionDuration,
-        [cssProperty("translate")]: styles.presentTranslate,
-        [cssProperty(["present", "opacity"])]: styles.presentOpacity,
-      },
-      props.style,
-    ],
-  };
-});
-
-const isRender = computed(() => {
-  return isShow.value || props.keepalive;
-});
-
-const time = computed(() => {
-  return props.duration / 1000 + "s";
-});
-
-// Methods
-// ----------------------------------------------------------------------------
-const createIndex = () => {
-  if (zIndex.value === 0 || !props.keepalive) {
-    zIndex.value = presentIndex.newIndex();
-  }
-};
-
-const render = (data: RenderOptions) => {
-  if (data.backdropTransitionDuration !== undefined) {
-    styles.backdropTransitionDuration = data.backdropTransitionDuration;
-  }
-  if (data.presentTransitionDuration !== undefined) {
-    styles.presentTransitionDuration = data.presentTransitionDuration;
-  }
-
-  styles.backdropOpacity = data.backdropOpacity;
-
-  if (data.presentTranslate !== undefined) {
-    styles.presentTranslate = data.presentTranslate;
-  }
-  if (data.presentOpacity !== undefined) {
-    styles.presentOpacity = data.presentOpacity;
-  }
-};
-
-// On click backdrop
-const onClickBackdrop = (e: unknown) => {
-  (e as Event).preventDefault();
-  emit("close", "backdrop");
-};
-
-const open = () => {
-  if (props.bounce && !isBounced.value) {
-    isBounced.value = true;
-    let presentTranslate = props.bounce;
-
-    if (props.placement == "bottom" || props.placement == "right") {
-      presentTranslate = `calc(${props.bounce} * -1)`;
-    }
-
-    render({
-      backdropTransitionDuration: time.value,
-      backdropOpacity: undefined,
-      presentTranslate: String(presentTranslate),
-      presentTransitionDuration: time.value,
-      presentOpacity: 1,
-    });
-
-    setTimeout(() => {
-      render({
-        presentTranslate: "0px",
-      });
-    }, props.duration);
-  } else {
-    render({
-      backdropOpacity: undefined,
-      backdropTransitionDuration: time.value,
-      presentTranslate: "0px",
-      presentTransitionDuration: time.value,
-      presentOpacity: 1,
-    });
-  }
-};
-
-const close = () => {
-  isBounced.value = false;
-  let presentTranslate = "0px";
-  let presentOpacity = 1;
-
-  if (props.placement == "bottom" || props.placement == "right") {
-    presentTranslate = "100%";
-  } else if (props.placement == "top" || props.placement == "left") {
-    presentTranslate = "-100%";
-  } else if (props.placement == "center") {
-    presentTranslate = "0px";
-    presentOpacity = 0;
-  }
-
-  render({
-    backdropOpacity: 0,
-    backdropTransitionDuration: time.value,
-    presentTranslate,
-    presentTransitionDuration: time.value,
-    presentOpacity,
-  });
-};
-
-// Lifecycle
-// ----------------------------------------------------------------------------
-onMounted(() => {
-  if (props.visible) open();
-  else close();
-});
-
-// Trigger visible
-watch(
-  () => props.visible,
-  () => {
-    if (props.visible) {
-      createIndex();
-      isShow.value = true;
-
-      setTimeout(() => {
-        open();
-      }, 50);
-    } else {
-      close();
-
-      setTimeout(() => {
-        isShow.value = false;
-      }, props.duration);
-    }
-  }
-);
-
-// Provide / expose (public API)
-// ----------------------------------------------------------------------------
-defineExpose({
-  render,
-  open,
-  close,
-});
-</script>

package/src/components/radio/index.ts

@@ -1,2 +0,0 @@
-export * from "./radio";
-export * from "./radio-group";

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

@@ -1,2 +0,0 @@
-export { default as Radio } from "./radio.vue";
-export type { RadioProps } from "./radio.type";

package/src/components/radio/radio/radio.html

@@ -1,11 +0,0 @@
-<div
-  v-bind="radioAttrs"
-  @pointerup="onRadio"
-  :tabindex="disabled ? -1 : 0"
-  @focus="onFocus"
-  @blur="onBlur"
-  @keydown="onKeydown"
->
-  <div v-bind="radioIconAttrs"></div>
-  <slot></slot>
-</div>

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("motion", "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,15 +0,0 @@
-import { AppSize } from "../../app";
-
-export type RadioVariant = "fill" | "outline";
-export type RadioSize = AppSize;
-
-// 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;
-};