@toife/vue 3.3.3 → 3.3.6

package/src/components/checkbox/checkbox.vue

@@ -1,74 +0,0 @@
-<style lang="scss" src="@toife/core/features/checkbox/checkbox.scss" scoped></style>
-<template src="./checkbox.html"></template>
-<script lang="ts" setup>
-import { unref, computed, inject, ref } from "vue";
-import {
-  CHECKBOX_DEFAULT_PROPS,
-  APP_PROVIDER_STATE_KEY,
-  getCheckboxAttrs,
-  getCheckboxIconAttrs,
-  type AppProviderState,
-  type CheckboxEvent,
-  type CheckboxProps,
-} from "@toife/core";
-import type { ProviderStateRefs } from "../../shared/provider-state";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<CheckboxProps>(), {
-  ...CHECKBOX_DEFAULT_PROPS,
-});
-const emit = defineEmits<CheckboxEvent>();
-const appState = inject<ProviderStateRefs<AppProviderState>>(APP_PROVIDER_STATE_KEY);
-
-// Reactive state
-// ----------------------------------------------------------------------------
-const isFocused = ref(false);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const checkboxAttrs = computed(() => {
-  const baseRole = unref(appState?.role) || "";
-  const role = props.role || baseRole;
-  const shape = props.shape || unref(appState?.shape) || "";
-  const shadow = (props?.shadow !== undefined ? props.shadow : unref(appState?.shadow)) ?? false;
-  return getCheckboxAttrs({
-    role,
-    shape,
-    size: props.size,
-    variant: props.variant,
-    modelValue: props.modelValue,
-    disabled: props.disabled,
-    readonly: props.readonly,
-    shadow: shadow && !props.disabled && isFocused.value,
-    focus: isFocused.value,
-  });
-});
-
-const checkboxIconAttrs = getCheckboxIconAttrs();
-
-// 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 +0,0 @@
-export { default as Checkbox } from "./checkbox.vue";

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.vue

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

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

package/src/components/container/container.html

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

package/src/components/container/container.vue

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

@@ -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, 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

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

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

@@ -1,2 +0,0 @@
-export { default as DecisionModal } from "./decision-modal.vue";
-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.vue

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

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

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.vue

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

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

package/src/components/field/field.html

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

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

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