@toife/vue 2.1.7 → 3.0.0

package/src/components/card/card-header/card-header.scss

@@ -0,0 +1,31 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$card-header: sass.fn-naming-prefix("card-header");
+
+// Property name - layer: surface (card)
+$background-color: sass.fn-naming-var("surface", "background-color");
+$color: sass.fn-naming-var("surface", "color");
+$padding-y: sass.fn-naming-var("spacing", "y");
+$padding-x: sass.fn-naming-var("spacing", "x");
+$border-color: sass.fn-naming-var("surface", "border-color");
+$border-width: sass.fn-naming-var("stroke", "width");
+$border: #{$border-width} solid transparent;
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$card-header} {
+  background-color: rgb(#{$background-color});
+  color: rgb(#{$color});
+  padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
+  border-bottom: #{$border};
+  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;
+
+  &.divider {
+    border-color: rgb(#{$border-color});
+  }
+}

package/src/components/card/card-header/card-header.vue

@@ -0,0 +1,28 @@
+<style lang="scss" src="./card-header.scss"></style>
+<template src="./card-header.html"></template>
+<script lang="ts" setup>
+import { computed, inject } from "vue";
+import { withPrefix } from "../../../utils";
+import { type CardProviderState, CARD_PROVIDER_STATE_KEY } from "../card";
+
+/// Define
+/// ------------------------------------------------------------
+const cardProviderState = inject<CardProviderState>(CARD_PROVIDER_STATE_KEY);
+
+/// Computed
+/// ------------------------------------------------------------
+const divider = computed(() => {
+  return cardProviderState?.divider.value ?? false;
+});
+
+const cardHeaderAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix("card-header"),
+      {
+        divider: divider.value,
+      },
+    ],
+  };
+});
+</script>

package/src/components/card/card-header/index.ts

@@ -0,0 +1 @@
+export { default as CardHeader } from "./card-header.vue";

package/src/components/card/index.ts

@@ -0,0 +1,4 @@
+export * from "./card";
+export * from "./card-body";
+export * from "./card-header";
+export * from "./card-footer";

package/src/components/checkbox/checkbox.html

@@ -0,0 +1,13 @@
+<div
+  v-bind="checkboxAttrs"
+  :tabindex="disabled ? -1 : 0"
+  role="checkbox"
+  :aria-checked="props.modelValue"
+  @click="onCheckbox"
+  @focus="onFocus"
+  @blur="onBlur"
+  @keydown="onKeydown"
+>
+  <div v-bind="checkboxIconAttrs"></div>
+  <slot></slot>
+</div>

package/src/components/checkbox/checkbox.scss

@@ -0,0 +1,138 @@
+@use "@toife/sass-layer-generator" 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
+$background-color: sass.fn-naming-var("item", "background-color");
+$background-color-hover: sass.fn-naming-var("item", "background-color", "soft");
+$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");
+
+$color: sass.fn-naming-var("item", "color");
+
+$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");
+
+.#{$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: 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: calc(#{$border-radius} * 0.5);
+    box-sizing: border-box;
+
+    &::after {
+      content: "";
+      width: 0.2rem;
+      height: 0.5rem;
+      border: solid rgb(#{$background-color-contrast});
+      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;
+    }
+  }
+
+  &.#{$shape-rounded} .#{$checkbox-icon} {
+    border-radius: calc(#{$border-radius} - 10%);
+  }
+
+  &.#{$shape-pill} .#{$checkbox-icon} {
+    border-radius: 50%;
+  }
+
+  &:not(.on) {
+    .#{$checkbox-icon} {
+      background-color: transparent;
+      border-color: rgb(#{$border-color-inactive});
+    }
+
+    &:not(.disabled):not(.readonly):hover {
+      .#{$checkbox-icon} {
+        border-color: rgb(#{$border-color});
+        background-color: rgba(#{$background-color-hover}, 0.2);
+      }
+    }
+  }
+
+  &.on {
+    &.fill {
+      .#{$checkbox-icon} {
+        background-color: rgb(#{$background-color});
+        border-color: rgb(#{$background-color});
+
+        &::after {
+          transform: rotate(45deg) scale(1);
+        }
+      }
+    }
+
+    &.outline {
+      .#{$checkbox-icon} {
+        border-color: rgb(#{$background-color});
+
+        &::after {
+          transform: rotate(45deg) scale(1);
+          border-color: rgb(#{$background-color});
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+
+    &.on {
+      .#{$checkbox-icon} {
+        background-color: rgb(#{$background-color-disabled});
+        border-color: rgb(#{$background-color-disabled});
+      }
+    }
+  }
+
+  &.readonly {
+    cursor: default;
+  }
+
+  &.focus {
+    &.shadow {
+      .#{$checkbox-icon} {
+        box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+export type CheckboxVariant = "fill" | "outline";
+
+export type CheckboxProps = {
+  modelValue?: boolean;
+  role?: string;
+  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

@@ -0,0 +1,91 @@
+<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 { withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  modelValue: false,
+  disabled: false,
+  variant: "fill",
+  readonly: false,
+  shadow: undefined,
+});
+const emit = defineEmits<CheckboxEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// State
+/// ------------------------------------------------------------
+const isFocused = ref(false);
+
+/// Computed
+/// ------------------------------------------------------------
+const role = computed(() => {
+  return props.role || appState?.role.value || "";
+});
+
+const shape = computed(() => {
+  return props.shape || appState?.shape.value || "";
+});
+
+const shadow = computed(() => {
+  return (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
+});
+
+const checkboxAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix(["layer", "item"]),
+      withPrefix([
+        "role",
+        props.modelValue && !props.disabled ? role.value : appState?.role.value || "",
+      ]),
+      withPrefix(["shape", shape.value]),
+      withPrefix("checkbox"),
+      props.variant,
+      {
+        on: props.modelValue,
+        disabled: props.disabled,
+        readonly: props.readonly,
+        shadow: shadow.value,
+        focus: isFocused.value,
+      },
+    ],
+  };
+});
+
+const checkboxIconAttrs = computed(() => {
+  return {
+    class: [withPrefix("checkbox-icon")],
+  };
+});
+
+/// 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

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

package/src/components/collapse/collapse.html

@@ -0,0 +1,16 @@
+<div v-bind="wrapperAttrs">
+  <div
+    v-bind="triggerAttrs"
+    role="button"
+    tabindex="0"
+    @click="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

@@ -0,0 +1,59 @@
+@use "@toife/sass-layer-generator" 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
+$collapse-height: sass.fn-naming-dvar("collapse-height", 0);
+$collapse-duration: sass.fn-naming-dvar(
+  "collapse-duration",
+  sass.fn-naming-var("motion", "duration")
+);
+
+$background-color: sass.fn-naming-var("surface", "background-color");
+$color: sass.fn-naming-var("surface", "color");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+// Collapse
+.#{$collapse} {
+  background-color: rgb(#{$background-color});
+  color: rgb(#{$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

@@ -0,0 +1,11 @@
+// Define
+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

@@ -0,0 +1,131 @@
+<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 { withPrefix, property } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+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);
+
+/// State
+/// ------------------------------------------------------------
+const contentRef = ref<HTMLElement | null>(null);
+const contentHeight = ref(0);
+const isOpen = ref(false);
+
+/// Computed
+/// ------------------------------------------------------------
+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: [
+      withPrefix(["layer", "surface"]),
+      withPrefix(["role", role.value]),
+      withPrefix("collapse"),
+      {
+        open: isOpen.value,
+        disabled: props.disabled,
+      },
+    ],
+  };
+});
+
+const triggerAttrs = computed(() => {
+  return {
+    class: [withPrefix("collapse-trigger")],
+    "aria-expanded": isOpen.value,
+    "aria-disabled": props.disabled,
+  };
+});
+
+const contentAttrs = computed(() => {
+  return {
+    class: [withPrefix("collapse-content")],
+    style: {
+      [property("collapse-duration")]: durationCss.value || undefined,
+      [property("collapse-height")]: isOpen.value ? `${contentHeight.value}px` : "0px",
+    },
+  };
+});
+
+const contentInnerClass = computed(() => withPrefix("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
+/// ------------------------------------------------------------
+onMounted(async () => {
+  if (isOpen.value) {
+    await nextTick();
+    measureContent();
+  }
+});
+
+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(() => {
+  isOpen.value = Boolean(props.modelValue);
+});
+</script>

package/src/components/collapse/index.ts

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

package/src/components/container/container.html

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

package/src/components/container/container.scss

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

@@ -0,0 +1,14 @@
+<style lang="scss" src="./container.scss" scoped></style>
+<template src="./container.html"></template>
+<script lang="ts" setup>
+import { withPrefix } from "../../utils";
+import { computed } from "vue";
+
+/// Computed
+/// ------------------------------------------------------------
+const containerAttrs = computed(() => {
+  return {
+    class: [withPrefix(["layer", "base"]), withPrefix("container")],
+  };
+});
+</script>

package/src/components/container/index.ts

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

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

@@ -0,0 +1,32 @@
+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;
+    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

@@ -0,0 +1,29 @@
+<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>