@toife/vue 3.2.5 → 3.2.7

package/src/components/checkbox/index.ts

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

package/src/components/collapse/collapse.html

@@ -0,0 +1,16 @@
+<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.vue

@@ -0,0 +1,126 @@
+<style lang="scss" src="@toife/core/features/collapse/collapse.scss" scoped></style>
+<template src="./collapse.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject, nextTick, onMounted, ref, watch } from "vue";
+import {
+  COLLAPSE_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  getCollapseAttrs,
+  getCollapseContentAttrs,
+  getCollapseContentInnerClass,
+  getCollapseTriggerAttrs,
+  type AppProviderState,
+  type CollapseEvent,
+  type CollapseProps,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<CollapseProps>(), {
+  ...COLLAPSE_DEFAULT_PROPS,
+});
+const emit = defineEmits<CollapseEvent>();
+const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const contentRef = ref<HTMLElement | null>(null);
+const contentHeight = ref(0);
+const isOpen = ref(false);
+const isFirstOpen = ref(true);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const role = computed(() => {
+  return props.role ?? unref(appState?.role) ?? "";
+});
+
+const durationCss = computed(() =>
+  props.duration !== undefined ? `${props.duration / 1000}s` : undefined
+);
+
+const wrapperAttrs = computed(() =>
+  getCollapseAttrs({
+    role: role.value,
+    open: isOpen.value,
+    disabled: props.disabled,
+  })
+);
+
+const triggerAttrs = computed(() =>
+  getCollapseTriggerAttrs({
+    open: isOpen.value,
+    disabled: props.disabled,
+  })
+);
+
+const contentAttrs = computed(() =>
+  getCollapseContentAttrs({
+    transition: !isFirstOpen.value,
+    duration: durationCss.value,
+    height: isOpen.value ? `${contentHeight.value}px` : "0px",
+  })
+);
+
+const contentInnerClass = computed(() => getCollapseContentInnerClass());
+
+// 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();
+      isFirstOpen.value = false;
+    }
+  },
+  { 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

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

package/src/components/container/container.html

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

package/src/components/container/container.vue

@@ -0,0 +1,7 @@
+<style lang="scss" src="@toife/core/features/container/container.scss" scoped></style>
+<template src="./container.html"></template>
+<script lang="ts" setup>
+import { getContainerAttrs } from "@toife/core";
+// Static layout wrapper classes
+const containerAttrs = getContainerAttrs();
+</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,33 @@
+import { ref } from "vue";
+import { type DecisionModalButton, type DecisionModalComposableProps } from "@toife/core";
+
+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

@@ -0,0 +1,29 @@
+<Present
+  :placement="placement"
+  backdrop="display"
+  :keepalive="keepalive"
+  :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>

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

@@ -0,0 +1,76 @@
+<style lang="scss" src="@toife/core/features/decision-modal/decision-modal.scss" scoped></style>
+<template src="./decision-modal.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject, ref } from "vue";
+import { Present } from "../present";
+import { Button as CustomButton } from "../button";
+import {
+  DECISION_MODAL_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  getDecisionModalAttrs,
+  getDecisionModalBodyAttrs,
+  getDecisionModalFooterAttrs,
+  getDecisionModalHeaderAttrs,
+  type DecisionModalButton,
+  type AppProviderState,
+  type DecisionModalEvent,
+  type DecisionModalProps,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<DecisionModalProps>(), {
+  ...DECISION_MODAL_DEFAULT_PROPS,
+});
+const emit = defineEmits<DecisionModalEvent>();
+const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const pop = ref(false);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const shape = computed(() => {
+  return props.shape || unref(appState?.shape) || "";
+});
+
+const divider = computed(() => {
+  return (props.divider !== undefined ? props.divider : unref(appState?.divider)) ?? false;
+});
+
+const decisionModalAttrs = computed(() => {
+  const role = props.role || unref(appState?.role) || "";
+
+  return getDecisionModalAttrs({
+    role,
+    shape: shape.value,
+    pop: pop.value,
+    divider: divider.value,
+  });
+});
+
+const decisionModalHeaderAttrs = computed(() => getDecisionModalHeaderAttrs());
+const decisionModalBodyAttrs = computed(() => getDecisionModalBodyAttrs());
+const decisionModalFooterAttrs = computed(() => getDecisionModalFooterAttrs({ 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

@@ -0,0 +1,2 @@
+export { default as DecisionModal } from "./decision-modal.vue";
+export { useDecisionModal } from "./decision-modal.composable";

package/src/components/divider/divider.html

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

package/src/components/divider/divider.vue

@@ -0,0 +1,26 @@
+<style lang="scss" src="@toife/core/features/divider/divider.scss" scoped></style>
+<template src="./divider.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject } from "vue";
+import {
+  DIVIDER_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  getDividerAttrs,
+  type AppProviderState,
+  type DividerProps,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<DividerProps>(), {
+  ...DIVIDER_DEFAULT_PROPS,
+});
+const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const dividerAttrs = computed(() => {
+  const role = props.role || unref(appState?.role) || "";
+  return getDividerAttrs({ role, direction: props.direction });
+});
+</script>

package/src/components/divider/index.ts

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

package/src/components/dropdown/dropdown.html

@@ -0,0 +1,6 @@
+<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.vue

@@ -0,0 +1,101 @@
+<style lang="scss" src="@toife/core/features/dropdown/dropdown.scss" scoped></style>
+<template src="./dropdown.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject, onMounted, onUnmounted, ref, watch } from "vue";
+import {
+  DROPDOWN_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  getDropdownAttrs,
+  getDropdownPanelAttrs,
+  type AppProviderState,
+  type DropdownEvent,
+  type DropdownProps,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<DropdownProps>(), {
+  ...DROPDOWN_DEFAULT_PROPS,
+});
+const emit = defineEmits<DropdownEvent>();
+const appState = inject<ProviderStateRefs<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 ?? unref(appState?.role) ?? "";
+  const shadow = props.shadow ?? unref(appState?.shadow) ?? false;
+  const shape = props.shape ?? unref(appState?.shape) ?? "";
+
+  return getDropdownAttrs({
+    role,
+    shape,
+    size: props.size,
+    open: isOpen.value,
+    disabled: props.disabled,
+    shadow,
+  });
+});
+
+const panelAttrs = computed(() => getDropdownPanelAttrs({ placement: 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

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

package/src/components/field/field.html

@@ -0,0 +1,30 @@
+<div v-bind="fieldAttrs">
+  <div v-bind="fieldContentAttrs">
+    <slot name="start-input"></slot>
+    <slot name="input">
+      <textarea
+        v-bind="fieldInputAttrs"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @beforeinput="onBeforeinput"
+        v-model="content"
+        :rows="line"
+        v-if="type === 'paragraph'"
+      />
+      <input
+        v-bind="fieldInputAttrs"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @beforeinput="onBeforeinput"
+        v-model="content"
+        :type="type"
+        v-else
+      />
+    </slot>
+    <slot name="end-input"></slot>
+  </div>
+  <div v-bind="fieldMessageAttrs" v-if="message">{{ message }}</div>
+  <slot></slot>
+</div>

package/src/components/field/field.vue

@@ -0,0 +1,121 @@
+<style lang="scss" src="@toife/core/features/field/field.scss" scoped></style>
+<template src="./field.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject, nextTick, onMounted, ref, watch } from "vue";
+import {
+  FIELD_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  getFieldAttrs,
+  getFieldContentAttrs,
+  getFieldInputAttrs,
+  getFieldMessageAttrs,
+  type AppProviderState,
+  type FieldEvent,
+  type FieldProps,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<FieldProps>(), {
+  ...FIELD_DEFAULT_PROPS,
+});
+const emit = defineEmits<FieldEvent>();
+const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
+
+// Reactive state
+// ----------------------------------------------------------------------------
+const isFocus = ref(false);
+const caret = ref(0);
+const content = ref("");
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const fieldAttrs = computed(() => {
+  const role = props.role || unref(appState?.role) || "";
+  const shape = props.shape || unref(appState?.shape) || "";
+  const shadow = (props?.shadow !== undefined ? props.shadow : unref(appState?.shadow)) ?? false;
+  const direction = props.direction || unref(appState?.direction) || "left";
+
+  return getFieldAttrs({
+    role,
+    shape,
+    size: props.size,
+    direction,
+    variant: props.variant,
+    type: props.type,
+    disabled: props.disabled,
+    focus: isFocus.value,
+    shadow,
+    readonly: props.readonly,
+    line: Number(props.line),
+    maxLine: props.maxLine !== undefined ? Number(props.maxLine) : undefined,
+  });
+});
+
+const rawContent = computed(() => {
+  const model = props.modelValue;
+  if (model !== null && model !== undefined && model !== "") {
+    return String(model);
+  }
+  const value = props.value;
+  if (value !== null && value !== undefined && value !== "") {
+    return String(value);
+  }
+  return "";
+});
+
+const fieldContentAttrs = computed(() => getFieldContentAttrs());
+
+const fieldInputAttrs = computed(() => ({
+  ...getFieldInputAttrs(),
+  name: props.name,
+  id: props.id,
+  placeholder: props.placeholder,
+  autocomplete: props.autocomplete,
+  type: props.type,
+  readonly: props.readonly,
+  disabled: props.disabled,
+  maxlength: props.maxLength,
+  tabindex: props.tabindex,
+}));
+
+const fieldMessageAttrs = computed(() => getFieldMessageAttrs());
+
+// Methods
+// ----------------------------------------------------------------------------
+const onFocus = (ev: FocusEvent) => {
+  if (props.disabled) return;
+  isFocus.value = true;
+  emit("focus", ev);
+};
+
+const onBlur = (ev: FocusEvent) => {
+  if (props.disabled) return;
+  isFocus.value = false;
+  emit("blur", ev);
+};
+
+const onInput = (ev: Event) => {
+  emit("input", ev);
+};
+
+const onBeforeinput = (ev: Event) => {
+  emit("beforeinput", ev);
+};
+
+watch(
+  () => rawContent.value,
+  (value) => {
+    content.value = value.toString();
+  },
+  { immediate: true }
+);
+
+watch(
+  () => content.value,
+  (value) => {
+    emit("update:modelValue", value.toString());
+  }
+);
+</script>

package/src/components/field/index.ts

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

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

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

package/src/components/form-group/form-group.vue

@@ -0,0 +1,15 @@
+<style lang="scss" src="@toife/core/features/form-group/form-group.scss" scoped></style>
+<template src="./form-group.html"></template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { FORM_GROUP_DEFAULT_PROPS, getFormGroupAttrs, type FormGroupProps } from "@toife/core";
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<FormGroupProps>(), {
+  ...FORM_GROUP_DEFAULT_PROPS,
+});
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const formGroupAttrs = computed(() => getFormGroupAttrs({ direction: props.direction }));
+</script>

package/src/components/form-group/index.ts

@@ -0,0 +1 @@
+export { default as FormGroup } from "./form-group.vue";

package/src/components/gesture-indicator/gesture-indicator.html

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

package/src/components/gesture-indicator/gesture-indicator.vue

@@ -0,0 +1,32 @@
+<style
+  lang="scss"
+  src="@toife/core/features/gesture-indicator/gesture-indicator.scss"
+  scoped
+></style>
+<template src="./gesture-indicator.html"></template>
+<script lang="ts" setup>
+import { unref, computed, inject } from "vue";
+import {
+  GESTURE_INDICATOR_DEFAULT_PROPS,
+  APP_PROVIDER_STATE_KEY,
+  getGestureIndicatorAttrs,
+  type AppProviderState,
+  type GestureIndicatorProps,
+} from "@toife/core";
+import type { ProviderStateRefs } from "../../shared/provider-state";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<GestureIndicatorProps>(), {
+  ...GESTURE_INDICATOR_DEFAULT_PROPS,
+});
+const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const gestureIndicatorAttrs = computed(() => {
+  const role = props.role || unref(appState?.role) || "";
+
+  return getGestureIndicatorAttrs({ role, placement: props.placement });
+});
+</script>

package/src/components/gesture-indicator/index.ts

@@ -0,0 +1 @@
+export { default as GestureIndicator } from "./gesture-indicator.vue";

package/src/components/image/image.html

@@ -0,0 +1 @@
+<img @error="handleError" :src="dataSrc" />