@toife/vue 3.1.5 → 3.2.0

package/src/components/decision-modal/decision-modal.scss

@@ -1,144 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$decision-modal: sass.fn-naming-prefix("decision-modal");
-$decision-modal-header: sass.fn-naming-prefix("decision-modal-header");
-$decision-modal-body: sass.fn-naming-prefix("decision-modal-body");
-$decision-modal-footer: sass.fn-naming-prefix("decision-modal-footer");
-$button: sass.fn-naming-prefix("button");
-$shape-pill: sass.fn-naming-prefix("shape-pill");
-
-// Property name - layer: decision-modal
-$decision-modal-background-color: sass.fn-naming-var("modal", "background-color");
-$decision-modal-border-color: sass.fn-naming-var("modal", "border-color");
-$decision-modal-color: sass.fn-naming-var("modal", "color");
-
-$radius-ratio: sass.fn-naming-var("radius-ratio");
-$radius-size: sass.fn-naming-var("radius-size");
-$width: sass.fn-naming-var("viewport", "width");
-$max-width: sass.fn-naming-var("overlay", "max-width");
-$padding-y: sass.fn-naming-var("spacing", "y");
-$padding-x: sass.fn-naming-var("spacing", "x");
-$margin-y: sass.fn-naming-var("spacing", "y");
-$margin-x: sass.fn-naming-var("spacing", "x");
-$animation-duration: sass.fn-naming-var("motion", "duration");
-$border-width: sass.fn-naming-var("stroke", "width");
-$transition-duration: sass.fn-naming-var("motion", "duration");
-$border-radius: calc(min(#{$width}, #{$radius-size}) * #{$radius-ratio});
-
-.#{$decision-modal} {
-  // Styles
-  background-color: rgba(#{$decision-modal-background-color});
-  color: rgba(#{$decision-modal-color});
-  width: #{$width};
-  max-width: #{$max-width};
-  overflow: hidden;
-  position: relative;
-  margin: calc(#{$margin-x} * 4) calc(#{$margin-y} * 2);
-  border-radius: #{$border-radius};
-  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;
-
-  // Header of alert
-  .#{$decision-modal-header} {
-    padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: 600;
-    border-bottom: #{$border-width} solid transparent;
-    color: rgba(#{$decision-modal-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;
-  }
-
-  // Content of alert
-  .#{$decision-modal-body} {
-    padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
-    color: rgba(#{$decision-modal-color});
-  }
-
-  // Footer of alert
-  .#{$decision-modal-footer} {
-    display: flex;
-    border-top: #{$border-width} solid transparent;
-    color: rgba(#{$decision-modal-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;
-
-    > * {
-      flex: 1;
-    }
-
-    .#{$button} {
-      font-weight: 600;
-      border-radius: 0rem;
-    }
-
-    &.actions-flow-column {
-      flex-direction: column;
-    }
-
-    &.actions-flow-row {
-      flex-direction: row;
-    }
-  }
-
-  &.#{$shape-pill} {
-    .#{$decision-modal-footer} {
-      column-gap: #{$padding-x};
-      row-gap: #{$padding-y};
-      padding: calc(#{$padding-y} * 2) calc(#{$padding-x} * 2);
-
-      .#{$button} {
-        border-radius: #{$border-radius};
-      }
-    }
-  }
-
-  &.divider {
-    .#{$decision-modal-header},
-    .#{$decision-modal-footer} {
-      border-color: rgba(#{$decision-modal-border-color});
-    }
-  }
-
-  // Set effect with class
-  &.pop {
-    animation: pop #{$animation-duration} ease-in-out;
-  }
-}
-
-@keyframes pop {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.1);
-  }
-
-  70% {
-    transform: scale(1);
-  }
-
-  80% {
-    transform: scale(1.1);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}

package/src/components/decision-modal/decision-modal.type.ts

@@ -1,35 +0,0 @@
-import { ButtonVariant } from "../button/button.type";
-
-// Type definitions
-export type DecisionModalButton = {
-  text?: string;
-  role?: string;
-  variant?: ButtonVariant;
-  handler?: () => void;
-  data?: unknown;
-};
-
-export type DecisionModalFlow = "row" | "column";
-
-export type DecisionModalProps = {
-  visible?: boolean;
-  title?: string;
-  message: string;
-  actions: DecisionModalButton[];
-  dismiss?: Array<string>;
-  placement?: string;
-  role?: string;
-  shape?: string;
-  divider?: boolean;
-  flow?: DecisionModalFlow;
-};
-
-export type DecisionModalComposableProps = DecisionModalProps & {
-  onClose?: (type?: string) => void;
-  onChoose?: (btn?: DecisionModalButton) => void;
-};
-
-export type DecisionModalEmit = {
-  (e: "close", type?: string): void;
-  (e: "choose", btn: DecisionModalButton): void;
-};

package/src/components/decision-modal/decision-modal.vue

@@ -1,96 +0,0 @@
-<style lang="scss" src="./decision-modal.scss" scoped></style>
-<template src="./decision-modal.html"></template>
-<script lang="ts" setup>
-import { computed, inject, ref } from "vue";
-import { Present } from "../present";
-import { Button as CustomButton } from "../button";
-import {
-  type DecisionModalEmit,
-  type DecisionModalButton,
-  type DecisionModalProps,
-} from "./decision-modal.type";
-import { cssPrefix } from "../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<DecisionModalProps>(), {
-  placement: "center",
-  keepalive: false,
-  visible: false,
-  shape: undefined,
-  role: undefined,
-  divider: undefined,
-  flow: "row",
-});
-const emit = defineEmits<DecisionModalEmit>();
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const pop = ref(false);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const shape = computed(() => {
-  return props.shape || appState?.shape.value || "";
-});
-
-const divider = computed(() => {
-  return (props.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
-});
-
-const decisionModalAttrs = computed(() => {
-  const role = props.role || appState?.role.value || "";
-
-  return {
-    class: [
-      cssPrefix(["layer", "modal"]),
-      cssPrefix(["role", role]),
-      cssPrefix(["shape", shape.value]),
-      cssPrefix("decision-modal"),
-      {
-        pop: pop.value,
-        divider: divider.value,
-      },
-    ],
-  };
-});
-
-const decisionModalHeaderAttrs = computed(() => {
-  return {
-    class: [cssPrefix("decision-modal-header")],
-  };
-});
-
-const decisionModalBodyAttrs = computed(() => {
-  return {
-    class: [cssPrefix("decision-modal-body")],
-  };
-});
-
-const decisionModalFooterAttrs = computed(() => {
-  return {
-    class: [cssPrefix("decision-modal-footer"), `actions-flow-${props.flow}`],
-  };
-});
-
-// Methods
-// ----------------------------------------------------------------------------
-const onClose = (val: string) => {
-  if (props.dismiss && props.dismiss.includes(val)) {
-    emit("close", val);
-  } else if (val === "backdrop") {
-    pop.value = true;
-    setTimeout(() => {
-      pop.value = false;
-    }, 300);
-  }
-};
-
-const onChoose = (btn: DecisionModalButton) => {
-  emit("close");
-  btn.handler?.();
-  emit("choose", btn);
-};
-</script>

package/src/components/decision-modal/index.ts

@@ -1,9 +0,0 @@
-export { default as DecisionModal } from "./decision-modal.vue";
-export type {
-  DecisionModalProps,
-  DecisionModalEmit,
-  DecisionModalButton,
-  DecisionModalComposableProps,
-  DecisionModalFlow,
-} from "./decision-modal.type";
-export { useDecisionModal } from "./decision-modal.composable";

package/src/components/divider/divider.html

@@ -1 +0,0 @@
-<div v-bind="dividerAttrs"></div>

package/src/components/divider/divider.scss

@@ -1,29 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class
-$divider: sass.fn-naming-prefix("divider");
-
-// Property name - layer: divider
-$divider-border-color: sass.fn-naming-var("divider", "border-color");
-$border-width: sass.fn-naming-var("stroke", "width");
-$transition-duration: sass.fn-naming-var("motion", "duration");
-
-// Divider
-.#{$divider} {
-  transition:
-    border-radius #{$transition-duration} ease,
-    box-shadow #{$transition-duration} ease,
-    border-color #{$transition-duration} ease,
-    background-color #{$transition-duration} ease,
-    color #{$transition-duration} ease;
-
-  &.horizontal {
-    width: 100%;
-    border-bottom: #{$border-width} solid rgba(#{$divider-border-color});
-  }
-
-  &.vertical {
-    height: 100%;
-    border-right: #{$border-width} solid rgba(#{$divider-border-color});
-  }
-}

package/src/components/divider/divider.type.ts

@@ -1,6 +0,0 @@
-export type DividerDirection = "horizontal" | "vertical";
-
-export type DividerProps = {
-  direction?: DividerDirection;
-  role?: string;
-};

package/src/components/divider/divider.vue

@@ -1,31 +0,0 @@
-<style lang="scss" src="./divider.scss" scoped></style>
-<template src="./divider.html"></template>
-<script lang="ts" setup>
-import { cssPrefix } from "../../utils";
-import { type DividerProps } from "./divider.type";
-import { computed, inject } from "vue";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<DividerProps>(), {
-  direction: "horizontal",
-});
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const dividerAttrs = computed(() => {
-  const role = props.role || appState?.role.value || "";
-  return {
-    class: [
-      cssPrefix(["layer", "divider"]),
-      cssPrefix(["role", role]),
-      cssPrefix("divider"),
-      {
-        [props.direction]: true,
-      },
-    ],
-  };
-});
-</script>

package/src/components/divider/index.ts

@@ -1,2 +0,0 @@
-export { default as Divider } from "./divider.vue";
-export type { DividerDirection, DividerProps } from "./divider.type";

package/src/components/dropdown/dropdown.html

@@ -1,6 +0,0 @@
-<div ref="rootRef" v-bind="wrapperAttrs">
-  <slot name="trigger" :toggle="toggle" :isOpen="isOpen" />
-  <div v-show="isOpen" v-bind="panelAttrs">
-    <slot />
-  </div>
-</div>

package/src/components/dropdown/dropdown.scss

@@ -1,71 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$dropdown: sass.fn-naming-prefix("dropdown");
-$dropdown-panel: sass.fn-naming-prefix("dropdown-panel");
-
-// Property name - layer: dropdown
-$dropdown-border-color: sass.fn-naming-var("dropdown", "border-color");
-$dropdown-background-color: sass.fn-naming-var("dropdown", "background-color");
-$dropdown-color: sass.fn-naming-var("dropdown", "color");
-$radius-ratio: sass.fn-naming-var("radius-ratio");
-$border-width: sass.fn-naming-var("stroke", "width");
-$spacing-x: sass.fn-naming-var("spacing", "x");
-$spacing-y: sass.fn-naming-var("spacing", "y");
-$size-font-size: sass.fn-naming-var("font-size");
-$size-line-height: sass.fn-naming-var("line-height");
-$transition-duration: sass.fn-naming-var("motion", "duration");
-
-$size-control-block-size: sass.fn-naming-var("control-block-size");
-$radius-size: sass.fn-naming-var("radius-size");
-
-.#{$dropdown} {
-  position: relative;
-  display: block;
-  width: 100%;
-}
-
-.#{$dropdown-panel} {
-  position: absolute;
-  z-index: 20;
-  min-width: 100%;
-  box-sizing: border-box;
-  border-radius: calc(min(#{$size-control-block-size}, #{$radius-size}) * #{$radius-ratio});
-  border-width: #{$border-width};
-  margin: #{$spacing-y} 0;
-  border-style: solid;
-  border-color: rgba(#{$dropdown-border-color});
-  background-color: rgba(#{$dropdown-background-color});
-  color: rgba(#{$dropdown-color});
-  font-size: #{$size-font-size};
-  line-height: #{$size-line-height};
-  max-height: min(50vh, 16rem);
-  overflow-y: auto;
-  transition:
-    border-color #{$transition-duration} ease,
-    background-color #{$transition-duration} ease,
-    color #{$transition-duration} ease,
-    box-shadow #{$transition-duration} ease;
-
-  &.bottom-start {
-    top: 100%;
-    left: 0;
-  }
-
-  &.bottom-end {
-    top: 100%;
-    right: 0;
-    left: auto;
-  }
-
-  &.top-start {
-    bottom: 100%;
-    left: 0;
-  }
-
-  &.top-end {
-    bottom: 100%;
-    right: 0;
-    left: auto;
-  }
-}

package/src/components/dropdown/dropdown.type.ts

@@ -1,22 +0,0 @@
-import type { AppDirection, AppSize } from "../app";
-
-export type DropdownPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
-
-export type DropdownSize = AppSize;
-
-export type DropdownProps = {
-  modelValue?: boolean;
-  disabled?: boolean;
-  placement?: DropdownPlacement;
-  role?: string;
-  shadow?: boolean;
-  shape?: string;
-  direction?: AppDirection;
-  size?: DropdownSize;
-};
-
-export type DropdownEmit = {
-  (e: "update:modelValue", open: boolean): void;
-  (e: "open"): void;
-  (e: "close"): void;
-};

package/src/components/dropdown/dropdown.vue

@@ -1,111 +0,0 @@
-<style lang="scss" src="./dropdown.scss" scoped></style>
-<template src="./dropdown.html"></template>
-<script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, ref, watch } from "vue";
-import type { DropdownEmit, DropdownProps } from "./dropdown.type";
-import { cssPrefix } from "../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<DropdownProps>(), {
-  modelValue: false,
-  disabled: false,
-  placement: "bottom-start",
-  role: undefined,
-  shadow: undefined,
-  shape: undefined,
-  direction: undefined,
-  size: "standard",
-});
-const emit = defineEmits<DropdownEmit>();
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const rootRef = ref<HTMLElement | null>(null);
-const isOpen = ref(false);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const wrapperAttrs = computed(() => {
-  const role = props.role ?? appState?.role.value ?? "";
-  const shadow = props.shadow ?? appState?.shadow.value ?? false;
-  const shape = props.shape ?? appState?.shape.value ?? "";
-
-  return {
-    class: [
-      cssPrefix(["layer", "dropdown"]),
-      cssPrefix(["role", role]),
-      cssPrefix(["shape", shape]),
-      cssPrefix(["size", props.size]),
-      cssPrefix("dropdown"),
-      {
-        open: isOpen.value,
-        disabled: props.disabled,
-        shadow: shadow,
-      },
-    ],
-  };
-});
-
-const panelAttrs = computed(() => {
-  return {
-    class: [cssPrefix("dropdown-panel"), props.placement],
-  };
-});
-
-// Methods
-// ----------------------------------------------------------------------------
-const toggle = () => {
-  if (props.disabled) return;
-  isOpen.value = !isOpen.value;
-  emit("update:modelValue", isOpen.value);
-};
-
-const close = () => {
-  if (!isOpen.value) return;
-  isOpen.value = false;
-  emit("update:modelValue", false);
-};
-
-const onDocPointerDown = (e: PointerEvent) => {
-  if (!isOpen.value) return;
-  const root = rootRef.value;
-  if (root && !root.contains(e.target as Node)) {
-    close();
-  }
-};
-
-const onDocKeydown = (e: KeyboardEvent) => {
-  if (e.key === "Escape" && isOpen.value) {
-    e.preventDefault();
-    close();
-  }
-};
-
-// Lifecycle
-// ----------------------------------------------------------------------------
-watch(
-  () => props.modelValue,
-  (open) => {
-    isOpen.value = open;
-  },
-  { immediate: true }
-);
-
-watch(isOpen, (next, prev) => {
-  if (next && !prev) emit("open");
-  if (!next && prev) emit("close");
-});
-
-onMounted(() => {
-  document.addEventListener("pointerdown", onDocPointerDown, true);
-  document.addEventListener("keydown", onDocKeydown, true);
-});
-
-onUnmounted(() => {
-  document.removeEventListener("pointerdown", onDocPointerDown, true);
-  document.removeEventListener("keydown", onDocKeydown, true);
-});
-</script>

package/src/components/dropdown/index.ts

@@ -1,2 +0,0 @@
-export { default as Dropdown } from "./dropdown.vue";
-export type { DropdownPlacement, DropdownProps, DropdownEmit } from "./dropdown.type";

package/src/components/field/field.html

@@ -1,12 +0,0 @@
-<OutlineField v-if="props.variant === 'outline'" v-bind="fieldAttrs">
-  <template #start-input>
-    <slot name="start-input"></slot>
-  </template>
-  <template #input>
-    <slot name="input"></slot>
-  </template>
-  <template #end-input>
-    <slot name="end-input"></slot>
-  </template>
-  <slot></slot>
-</OutlineField>

package/src/components/field/field.type.ts

@@ -1,43 +0,0 @@
-import type { AppDirection, AppSize } from "../app";
-
-export type FieldVariant = "outline" | "fill" | "underline";
-export type FieldSize = AppSize;
-export type FieldType = "text" | "number" | "email" | "password" | "tel" | "url" | "paragraph";
-
-// Type definitions
-export type FieldProps = {
-  // Wrapper
-  modelValue?: string | number;
-  name?: string;
-  variant?: FieldVariant;
-  role?: string;
-  shape?: string;
-  size?: FieldSize;
-  shadow?: boolean;
-  direction?: AppDirection;
-
-  // Input
-  id?: string;
-  value?: string | number;
-  placeholder?: string;
-  disabled?: boolean;
-  readonly?: boolean;
-  autocomplete?: string;
-  maxLength?: number | string;
-  tabindex?: number | string;
-  type?: FieldType;
-  line?: number | string;
-  maxLine?: number | string;
-
-  // Support
-  message?: string;
-  help?: string;
-};
-
-export type FieldEmit = {
-  (e: "update:modelValue", value: string): void;
-  (e: "focus", ev: FocusEvent): void;
-  (e: "blur", ev: FocusEvent): void;
-  (e: "input", ev: Event): void;
-  (e: "beforeinput", ev: Event): void;
-};