@toife/vue 2.1.7 → 3.0.0

package/src/components/present/present.vue

@@ -0,0 +1,198 @@
+<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 { withPrefix, property } from "../../utils";
+import { usePresent } from "./present.composable";
+
+/// Define
+/// ------------------------------------------------------------
+const presentIndex = usePresent();
+const emit = defineEmits(["close"]) as unknown as PresentEmit;
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<PresentProps>(), {
+  keepalive: false,
+  visible: false,
+  backdrop: "display",
+  duration: 200,
+  placement: "bottom",
+  bounce: false,
+});
+
+/// State
+/// ------------------------------------------------------------
+const isBounced = ref(false);
+const zIndex = ref(0);
+const isShow = ref(false);
+const styles = reactive({
+  backdropTransitionDuration: "0.2s",
+  backdropOpacity: 0.4,
+  presentTransitionDuration: "0.2s",
+  presentTranslate: "0px",
+  presentOpacity: 1,
+});
+
+/// Computed
+/// ------------------------------------------------------------
+const backdropAttrs = computed(() => {
+  return {
+    class: [withPrefix(["layer", "backdrop"]), withPrefix("present-backdrop")],
+    style: {
+      zIndex: zIndex.value - 1,
+      [property("transition-duration")]: styles.backdropTransitionDuration,
+      [property(["backdrop", "opacity"])]:
+        props.backdrop === "transparent" ? 0 : styles.backdropOpacity,
+    },
+  };
+});
+
+// Present attributes
+const presentAttrs = computed(() => {
+  return {
+    class: [withPrefix(["layer", "base"]), withPrefix("present"), props.class, props.placement],
+    style: [
+      {
+        zIndex: zIndex.value,
+        [property("transition-duration")]: styles.presentTransitionDuration,
+        [property("translate")]: styles.presentTranslate,
+        [property(["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;
+  }
+  if (data.backdropOpacity !== undefined) {
+    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: 0.4,
+      presentTranslate: String(presentTranslate),
+      presentTransitionDuration: time.value,
+      presentOpacity: 1,
+    });
+
+    setTimeout(() => {
+      render({
+        presentTranslate: "0px",
+      });
+    }, props.duration);
+  } else {
+    render({
+      backdropOpacity: 0.4,
+      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);
+    }
+  }
+);
+
+// Export, Expose
+/// ------------------------------------------------------------
+defineExpose({
+  render,
+  open,
+  close,
+});
+</script>

package/src/components/radio/index.ts

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

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

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

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

@@ -0,0 +1,11 @@
+<div
+  v-bind="radioAttrs"
+  @click="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

@@ -0,0 +1,125 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Classes
+$radio: sass.fn-naming-prefix("radio");
+$radio-icon: sass.fn-naming-prefix("radio-icon");
+
+// Properties - layer: item
+$background-color: sass.fn-naming-var("item", "background-color");
+$background-color-hover: sass.fn-naming-var("item", "background-color", "subtle");
+$background-color-inactive: sass.fn-naming-var("item", "background-color", "soft");
+$background-color-contrast: sass.fn-naming-var("item", "background-color", "contrast");
+$background-color-disabled: sass.fn-naming-var("item", "background-color", "subtle");
+
+$border-color: sass.fn-naming-var("item", "border-color");
+$border-color-inactive: sass.fn-naming-var("item", "border-color", "subtle");
+
+$transition-duration: sass.fn-naming-var("motion", "duration");
+$border-radius: sass.fn-naming-var("border-radius");
+
+.#{$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: 1.25rem;
+    height: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgb(#{$border-color-inactive});
+    background-color: 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: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      background-color: rgb(#{$background-color-contrast});
+      transform: scale(0);
+      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: rgb(#{$border-color-inactive});
+    }
+
+    &:not(.disabled):not(.readonly):hover {
+      .#{$radio-icon} {
+        border-color: rgb(#{$border-color});
+        background-color: rgba(#{$background-color-hover}, 0.2);
+      }
+    }
+  }
+
+  &.on {
+    &.fill {
+      .#{$radio-icon} {
+        background-color: rgb(#{$background-color});
+        border-color: rgb(#{$background-color});
+
+        &::after {
+          transform: scale(1);
+        }
+      }
+    }
+
+    &.outline {
+      .#{$radio-icon} {
+        background-color: transparent;
+        border-color: rgb(#{$background-color});
+
+        &::after {
+          transform: scale(1.5);
+          background-color: rgb(#{$background-color});
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+
+    &.on {
+      .#{$radio-icon} {
+        background-color: rgb(#{$background-color-disabled});
+        border-color: rgb(#{$background-color-disabled});
+      }
+    }
+  }
+
+  &.readonly {
+    cursor: default;
+  }
+
+  &.focus {
+    &.shadow {
+      .#{$radio-icon} {
+        box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,103 @@
+<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 { withPrefix } from "../../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
+import { type RadioGroupProviderState, RADIO_GROUP_PROVIDER_STATE_KEY } from "../radio-group";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<RadioProps>(), {
+  disabled: false,
+  shadow: undefined,
+});
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+const radioGroupState = inject<RadioGroupProviderState | null>(
+  RADIO_GROUP_PROVIDER_STATE_KEY,
+  null
+);
+
+/// State
+/// ------------------------------------------------------------
+const isFocused = ref(false);
+
+/// Computed
+/// ------------------------------------------------------------
+const role = computed(() => {
+  return props.role || radioGroupState?.role.value || appState?.role.value || "";
+});
+
+const variant = computed(() => {
+  return props.variant || radioGroupState?.variant.value || "";
+});
+
+const disabled = computed(() => {
+  return props.disabled || (radioGroupState?.disabled.value ?? false);
+});
+
+const readonly = computed(() => {
+  return props.readonly || (radioGroupState?.readonly.value ?? false);
+});
+
+const isChecked = computed(() => {
+  return radioGroupState?.modelValue.value === props.value;
+});
+
+const shadow = computed(() => {
+  return (props?.shadow !== undefined ? props.shadow : radioGroupState?.shadow.value) ?? false;
+});
+
+const radioAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix(["layer", "item"]),
+      withPrefix([
+        "role",
+        (isChecked.value && !disabled.value
+          ? role.value || radioGroupState?.role.value
+          : appState?.role.value) ?? "",
+      ]),
+      withPrefix("radio"),
+      variant.value,
+      {
+        on: isChecked.value,
+        disabled: disabled.value,
+        readonly: readonly.value,
+        shadow: shadow.value,
+        focus: isFocused.value,
+      },
+    ],
+  };
+});
+
+const radioIconAttrs = computed(() => {
+  return {
+    class: [withPrefix("radio-icon")],
+  };
+});
+
+/// 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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+@use "@toife/sass-layer-generator" 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

@@ -0,0 +1,28 @@
+import type { ComputedRef } from "vue";
+import type { RadioVariant } from "../radio/radio.type";
+
+export type RadioGroupOrientation = "horizontal" | "vertical";
+
+export type RadioGroupProps = {
+  modelValue?: string | number;
+  role?: string;
+  variant?: RadioVariant;
+  disabled?: boolean;
+  readonly?: boolean;
+  shadow?: boolean;
+  orientation?: RadioGroupOrientation;
+};
+
+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

@@ -0,0 +1,62 @@
+<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 { withPrefix } from "../../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
+import { RADIO_GROUP_PROVIDER_STATE_KEY } from "./radio-group.constants";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<RadioGroupProps>(), {
+  disabled: false,
+  readonly: false,
+  variant: "fill",
+  orientation: "vertical",
+  shadow: undefined,
+});
+const emit = defineEmits<RadioGroupEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// Computed
+/// ------------------------------------------------------------
+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: [
+      withPrefix(["layer", "item"]),
+      withPrefix(["role", role.value]),
+      withPrefix("radio-group"),
+      props.orientation,
+    ],
+  };
+});
+
+/// Provide
+/// ------------------------------------------------------------
+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

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

package/src/components/refresher/refresher.html

@@ -0,0 +1,6 @@
+<div v-bind="refresherAttrs" v-show="calculateOffset > 0">
+  <slot name="icon" :offset="calculateOffset" :refreshing="refreshing"></slot>
+</div>
+<div v-bind="containerAttrs" ref="container">
+  <slot></slot>
+</div>

package/src/components/refresher/refresher.scss

@@ -0,0 +1,36 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class
+$refresher: sass.fn-naming-prefix("refresher");
+$container: sass.fn-naming-prefix("refresher-container");
+
+// Variables
+$safe-area-top: sass.fn-naming-var("safe-area", "top");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+$offset: sass.fn-naming-var("refresher-offset");
+
+.#{$container} {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: auto;
+}
+
+// Refresher
+.#{$refresher} {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  transition: height #{$transition-duration} ease;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  line-height: 0;
+  z-index: 1;
+
+  &.moving {
+    top: calc(#{$safe-area-top} + #{$offset});
+  }
+}

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

@@ -0,0 +1,16 @@
+// Props
+export type RefresherVariant = "max" | "up";
+
+// Define
+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;
+};