@toife/vue 2.1.7 → 3.0.0

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

@@ -0,0 +1,136 @@
+@use "@toife/sass-layer-generator" 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: surface
+$border-radius: sass.fn-naming-var("border-radius");
+$background-color: sass.fn-naming-var("surface", "background-color");
+$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");
+$border-color: sass.fn-naming-var("surface", "border-color");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$decision-modal} {
+  // Styles
+  background-color: rgb(#{$background-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;
+    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);
+  }
+
+  // Footer of alert
+  .#{$decision-modal-footer} {
+    display: flex;
+    border-top: #{$border-width} solid 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;
+
+    > * {
+      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: rgb(#{$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

@@ -0,0 +1,35 @@
+import { ButtonVariant } from "../button/button.type";
+
+// Define
+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

@@ -0,0 +1,98 @@
+<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 { withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+const emit = defineEmits<DecisionModalEmit>();
+const props = withDefaults(defineProps<DecisionModalProps>(), {
+  placement: "center",
+  keepalive: false,
+  visible: false,
+  shape: undefined,
+  role: undefined,
+  divider: undefined,
+  flow: "row",
+});
+
+/// State
+/// ------------------------------------------------------------
+const pop = ref(false);
+
+/// Computed
+/// ------------------------------------------------------------
+const shape = computed(() => {
+  return props.shape || appState?.shape.value || "";
+});
+
+const role = computed(() => {
+  return props.role || appState?.role.value || "";
+});
+
+const divider = computed(() => {
+  return (props.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
+});
+
+const decisionModalAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix(["layer", "surface"]),
+      withPrefix(["role", role.value]),
+      withPrefix(["shape", shape.value]),
+      withPrefix("decision-modal"),
+      {
+        pop: pop.value,
+        divider: divider.value,
+      },
+    ],
+  };
+});
+
+const decisionModalHeaderAttrs = computed(() => {
+  return {
+    class: [withPrefix("decision-modal-header")],
+  };
+});
+
+const decisionModalBodyAttrs = computed(() => {
+  return {
+    class: [withPrefix("decision-modal-body")],
+  };
+});
+
+const decisionModalFooterAttrs = computed(() => {
+  return {
+    class: [withPrefix("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 && btn.handler();
+  emit("choose", btn);
+};
+</script>

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

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

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

package/src/components/divider/divider.scss

@@ -0,0 +1,29 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class
+$divider: sass.fn-naming-prefix("divider");
+
+// Property - layer: stroke
+$border-color: sass.fn-naming-var("stroke", "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 rgb(#{$border-color});
+  }
+
+  &.vertical {
+    height: 100%;
+    border-right: #{$border-width} solid rgb(#{$border-color});
+  }
+}

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

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

package/src/components/divider/divider.vue

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

package/src/components/divider/index.ts

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

package/src/components/field/field.html

@@ -0,0 +1 @@
+<OutlineField v-if="props.variant === 'outline'" v-bind="fieldAttrs" />

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

@@ -0,0 +1,43 @@
+import type { AppDirection } from "../app";
+
+export type FieldVariant = "outline" | "fill" | "underline";
+export type FieldSize = "small" | "standard" | "large";
+export type FieldType = "text" | "number" | "email" | "password" | "tel" | "url" | "paragraph";
+
+// Define
+export type FieldProps = {
+  // Wrapper
+  modelValue?: string;
+  name?: string;
+  variant?: FieldVariant;
+  role?: string;
+  shape?: string;
+  size?: FieldSize;
+  shadow?: boolean;
+  direction?: AppDirection;
+
+  // Input
+  id?: string;
+  value?: string;
+  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;
+};

package/src/components/field/field.vue

@@ -0,0 +1,85 @@
+<template src="./field.html"></template>
+<script lang="ts" setup>
+import { computed, inject } from "vue";
+import type { FieldProps } from "./field.type";
+import type { FieldEmit } from "./field.type";
+import { OutlineField } from "./outline";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+/// Define
+/// ------------------------------------------------------------
+const props = withDefaults(defineProps<FieldProps>(), {
+  modelValue: "",
+  type: "text",
+  size: "standard",
+  disabled: false,
+  readonly: false,
+  message: "",
+  help: "",
+  variant: "outline",
+  placeholder: "",
+  shadow: undefined,
+  direction: undefined,
+  line: 1,
+});
+const emit = defineEmits<FieldEmit>();
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+/// 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 direction = computed(() => {
+  return props.direction || appState?.direction?.value || "left";
+});
+
+const fieldAttrs = computed(() => {
+  return {
+    ...props,
+    direction: direction.value,
+    role: role.value,
+    shape: shape.value,
+    shadow: shadow.value,
+    onInput,
+    onFocus,
+    onBlur,
+    onBeforeinput,
+  };
+});
+
+/// Methods
+/// ------------------------------------------------------------
+const onInput = (event: Event) => {
+  let raw = "";
+  if (props.type !== "password") {
+    raw = (event.target as HTMLElement).innerText;
+  } else {
+    raw = (event.target as HTMLInputElement).value;
+  }
+  const value = raw.trim() === "" ? "" : raw;
+  emit("update:modelValue", value as string);
+  emit("input", event);
+};
+
+const onFocus = (event: FocusEvent) => {
+  emit("focus", event);
+};
+
+const onBlur = (event: FocusEvent) => {
+  emit("blur", event);
+};
+
+const onBeforeinput = (event: Event) => {
+  emit("beforeinput", event);
+};
+</script>

package/src/components/field/index.ts

@@ -0,0 +1,2 @@
+export { default as Field } from "./field.vue";
+export type { FieldVariant, FieldSize, FieldProps, FieldEmit } from "./field.type";

package/src/components/field/outline/index.ts

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

package/src/components/field/outline/outline.html

@@ -0,0 +1,32 @@
+<div v-bind="fieldAttrs">
+  <div v-bind="fieldContentAttrs">
+    <div
+      v-bind="fieldInputAttrs"
+      @input="onInput"
+      @compositionstart="onCompositionStart"
+      @compositionend="onCompositionEnd"
+      @focus="onFocus"
+      @blur="onBlur"
+      @beforeinput="onBeforeinput"
+      ref="contentRef"
+      v-text="content"
+      v-if="type !== 'password'"
+    ></div>
+    <input
+      v-bind="fieldInputAttrs"
+      @input="onInput"
+      @compositionstart="onCompositionStart"
+      @compositionend="onCompositionEnd"
+      @focus="onFocus"
+      @blur="onBlur"
+      @beforeinput="onBeforeinput"
+      ref="contentRef"
+      :value="content"
+      type="password"
+      v-else
+    ></input>
+  </div>
+  <div v-bind="fieldMessageAttrs" v-if="message">{{ message }}</div>
+  <div v-bind="fieldHelpAttrs" v-if="help">{{ help }}</div>
+  <slot></slot>
+</div>