@toife/vue 3.1.5 → 3.2.0

package/src/components/checkbox/checkbox.scss

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

package/src/components/checkbox/checkbox.type.ts

@@ -1,21 +0,0 @@
-import { AppSize } from "../app";
-
-export type CheckboxVariant = "fill" | "outline";
-export type CheckboxSize = AppSize;
-
-export type CheckboxProps = {
-  modelValue?: boolean;
-  role?: string;
-  size?: CheckboxSize;
-  shape?: string;
-  variant?: CheckboxVariant;
-  readonly?: boolean;
-  disabled?: boolean;
-  shadow?: boolean;
-};
-
-export type CheckboxEmit = {
-  (e: "update:modelValue", value: boolean): void;
-  (e: "focus"): void;
-  (e: "blur"): void;
-};

package/src/components/checkbox/checkbox.vue

@@ -1,80 +0,0 @@
-<style lang="scss" src="./checkbox.scss" scoped></style>
-<template src="./checkbox.html"></template>
-<script lang="ts" setup>
-import { computed, inject, ref } from "vue";
-import type { CheckboxProps, CheckboxEmit } from "./checkbox.type";
-import { cssPrefix } from "../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<CheckboxProps>(), {
-  modelValue: false,
-  disabled: false,
-  size: "standard",
-  variant: "fill",
-  readonly: false,
-  shadow: undefined,
-});
-const emit = defineEmits<CheckboxEmit>();
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const isFocused = ref(false);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const checkboxAttrs = computed(() => {
-  const baseRole = appState?.role.value || "";
-  const role = props.role || baseRole;
-  const shape = props.shape || appState?.shape.value || "";
-  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
-  return {
-    class: [
-      cssPrefix(["layer", "checkbox"]),
-      cssPrefix(["role", role]),
-      cssPrefix(["shape", shape]),
-      cssPrefix(["size", props.size]),
-      cssPrefix("checkbox"),
-      props.variant,
-      {
-        on: props.modelValue,
-        disabled: props.disabled,
-        readonly: props.readonly,
-        shadow: shadow && !props.disabled && isFocused.value,
-        focus: isFocused.value,
-      },
-    ],
-  };
-});
-
-const checkboxIconAttrs = {
-  class: [cssPrefix("checkbox-icon")],
-} as const;
-
-// Methods
-// ----------------------------------------------------------------------------
-const onCheckbox = () => {
-  if (props.disabled || props.readonly) return;
-  emit("update:modelValue", !props.modelValue);
-};
-
-const onFocus = () => {
-  if (props.disabled || props.readonly) return;
-  isFocused.value = true;
-  emit("focus");
-};
-
-const onBlur = () => {
-  if (props.disabled || props.readonly) return;
-  isFocused.value = false;
-  emit("blur");
-};
-
-const onKeydown = (e: KeyboardEvent) => {
-  if (e.key !== " " && e.key !== "Enter") return;
-  e.preventDefault();
-  onCheckbox();
-};
-</script>

package/src/components/checkbox/index.ts

@@ -1,2 +0,0 @@
-export { default as Checkbox } from "./checkbox.vue";
-export type { CheckboxProps } from "./checkbox.type";

package/src/components/collapse/collapse.html

@@ -1,16 +0,0 @@
-<div v-bind="wrapperAttrs">
-  <div
-    v-bind="triggerAttrs"
-    role="button"
-    tabindex="0"
-    @pointerup="toggle"
-    @keydown.enter.space.prevent="toggle"
-  >
-    <slot name="trigger" />
-  </div>
-  <div v-bind="contentAttrs" @transitionend="onTransitionEnd">
-    <div ref="contentRef" :class="contentInnerClass">
-      <slot />
-    </div>
-  </div>
-</div>

package/src/components/collapse/collapse.scss

@@ -1,59 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class
-$collapse: sass.fn-naming-prefix("collapse");
-$collapse-trigger: sass.fn-naming-prefix("collapse-trigger");
-$collapse-content: sass.fn-naming-prefix("collapse-content");
-$collapse-content-inner: sass.fn-naming-prefix("collapse-content-inner");
-
-// Property name - layer: collapse
-$collapse-height: sass.fn-naming-dvar(("collapse", "height"), 0);
-$collapse-duration: sass.fn-naming-dvar(
-  ("collapse", "duration"),
-  sass.fn-naming-var("motion", "duration")
-);
-
-$collapse-background-color: sass.fn-naming-var("collapse", "background-color");
-$collapse-color: sass.fn-naming-var("collapse", "color");
-$transition-duration: sass.fn-naming-var("motion", "duration");
-
-// Collapse
-.#{$collapse} {
-  background-color: rgba(#{$collapse-background-color});
-  color: rgba(#{$collapse-color});
-  transition:
-    background-color #{$transition-duration} ease,
-    color #{$transition-duration} ease;
-
-  &.disabled {
-    opacity: 0.6;
-    pointer-events: none;
-  }
-}
-
-// Trigger
-.#{$collapse-trigger} {
-  cursor: pointer;
-  user-select: none;
-  border: none;
-  background: none;
-  width: 100%;
-  padding: 0;
-  text-align: inherit;
-  font: inherit;
-  color: inherit;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-// Content wrapper - height animated from Vue
-.#{$collapse-content} {
-  overflow: hidden;
-  height: #{$collapse-height};
-  transition: height #{$collapse-duration} ease;
-}

package/src/components/collapse/collapse.type.ts

@@ -1,11 +0,0 @@
-// Type definitions
-export type CollapseProps = {
-  modelValue?: boolean;
-  duration?: number;
-  role?: string;
-  disabled?: boolean;
-};
-
-export type CollapseEmit = {
-  (e: "update:modelValue", value: boolean): void;
-};

package/src/components/collapse/collapse.vue

@@ -1,127 +0,0 @@
-<style lang="scss" src="./collapse.scss" scoped></style>
-<template src="./collapse.html"></template>
-<script lang="ts" setup>
-import { computed, inject, nextTick, onMounted, ref, watch } from "vue";
-import type { CollapseEmit, CollapseProps } from "./collapse.type";
-import { cssPrefix, cssProperty } from "../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<CollapseProps>(), {
-  modelValue: false,
-  duration: undefined,
-  role: undefined,
-  disabled: false,
-});
-const emit = defineEmits<CollapseEmit>();
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const contentRef = ref<HTMLElement | null>(null);
-const contentHeight = ref(0);
-const isOpen = ref(false);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const role = computed(() => {
-  return props.role ?? appState?.role.value ?? "";
-});
-
-const durationCss = computed(() =>
-  props.duration !== undefined ? `${props.duration / 1000}s` : undefined
-);
-
-const wrapperAttrs = computed(() => {
-  return {
-    class: [
-      cssPrefix(["layer", "collapse"]),
-      cssPrefix(["role", role.value]),
-      cssPrefix("collapse"),
-      {
-        open: isOpen.value,
-        disabled: props.disabled,
-      },
-    ],
-  };
-});
-
-const triggerAttrs = computed(() => {
-  return {
-    class: [cssPrefix("collapse-trigger")],
-    "aria-expanded": isOpen.value,
-    "aria-disabled": props.disabled,
-  };
-});
-
-const contentAttrs = computed(() => {
-  return {
-    class: [cssPrefix("collapse-content")],
-    style: {
-      [cssProperty("collapse-duration")]: durationCss.value || undefined,
-      [cssProperty("collapse-height")]: isOpen.value ? `${contentHeight.value}px` : "0px",
-    },
-  };
-});
-
-const contentInnerClass = computed(() => cssPrefix("collapse-content-inner"));
-
-// Methods
-// ----------------------------------------------------------------------------
-const measureContent = () => {
-  if (contentRef.value) {
-    contentHeight.value = contentRef.value.scrollHeight;
-  }
-};
-
-const toggle = () => {
-  if (props.disabled) return;
-  isOpen.value = !isOpen.value;
-  emit("update:modelValue", isOpen.value);
-};
-
-const onTransitionEnd = () => {
-  // Optional: hook for transition end (e.g. a11y)
-};
-
-// Lifecycle
-// ----------------------------------------------------------------------------
-watch(
-  () => props.modelValue,
-  async (open) => {
-    isOpen.value = open;
-    if (open) {
-      await nextTick();
-      measureContent();
-    }
-  },
-  { immediate: true }
-);
-
-watch(
-  () => contentRef.value,
-  (el) => {
-    if (el && isOpen.value) {
-      measureContent();
-    }
-  }
-);
-
-watch(
-  () => [contentRef.value?.innerHTML, isOpen.value],
-  async () => {
-    if (isOpen.value) {
-      await nextTick();
-      measureContent();
-    }
-  }
-);
-
-onMounted(async () => {
-  await nextTick();
-  if (isOpen.value) {
-    measureContent();
-  }
-});
-</script>

package/src/components/collapse/index.ts

@@ -1,2 +0,0 @@
-export { default as Collapse } from "./collapse.vue";
-export type { CollapseProps, CollapseEmit } from "./collapse.type";

package/src/components/container/container.html

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

package/src/components/container/container.scss

@@ -1,10 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$container: sass.fn-naming-prefix("container");
-
-.#{$container} {
-  width: 1200px;
-  max-width: 100%;
-  margin: 0 auto;
-}

package/src/components/container/container.vue

@@ -1,10 +0,0 @@
-<style lang="scss" src="./container.scss" scoped></style>
-<template src="./container.html"></template>
-<script lang="ts" setup>
-import { cssPrefix } from "../../utils";
-
-// Static layout wrapper classes
-const containerAttrs = {
-  class: [cssPrefix("container")],
-} as const;
-</script>

package/src/components/container/index.ts

@@ -1 +0,0 @@
-export { default as Container } from "./container.vue";

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

@@ -1,33 +0,0 @@
-import { ref } from "vue";
-import type { DecisionModalButton, DecisionModalComposableProps } from "./decision-modal.type";
-
-const data = ref<DecisionModalComposableProps | null>(null);
-const visible = ref(false);
-
-export const useDecisionModal = () => {
-  const open = (props: DecisionModalComposableProps) => {
-    data.value = props;
-    // Defer visibility so the modal mounts with props before entering the open transition
-    setTimeout(() => {
-      visible.value = true;
-    }, 50);
-  };
-
-  const close = (type?: string) => {
-    data.value?.onClose?.();
-    visible.value = false;
-  };
-
-  const choose = (btn: DecisionModalButton) => {
-    data.value?.onChoose?.(btn);
-    visible.value = false;
-  };
-
-  return {
-    open,
-    close,
-    choose,
-    visible,
-    data,
-  };
-};

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

@@ -1,29 +0,0 @@
-<Present
-  :placement="placement"
-  backdrop="display"
-  :keepalive="false"
-  :visible="visible"
-  @close="onClose"
->
-  <div v-bind="decisionModalAttrs">
-    <slot name="header">
-      <div v-bind="decisionModalHeaderAttrs" v-if="title">{{ title }}</div>
-    </slot>
-    <slot name="body">
-      <div v-bind="decisionModalBodyAttrs">{{ message }}</div>
-    </slot>
-    <slot name="footer">
-      <div v-bind="decisionModalFooterAttrs">
-        <CustomButton
-          v-for="(btn, btnIndex) in actions"
-          :key="`${btnIndex}`"
-          :role="btn.role"
-          :variant="btn.variant"
-          @click="onChoose(btn)"
-          :shape="shape"
-          >{{ btn.text }}</CustomButton
-        >
-      </div>
-    </slot>
-  </div>
-</Present>