@toife/vue 3.1.6 → 3.2.0

package/src/components/field/field.scss

@@ -1,184 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$field: sass.fn-naming-prefix("field");
-$field-content: sass.fn-naming-prefix("field-content");
-$field-input: sass.fn-naming-prefix("field-input");
-$field-message: sass.fn-naming-prefix("field-message");
-$field-help: sass.fn-naming-prefix("field-help");
-
-// Property name - layer: field
-$field-border-color: sass.fn-naming-var("field", "border-color");
-$field-border-color-focus: sass.fn-naming-var("field", "border-color", "focus");
-$field-border-color-hover: sass.fn-naming-var("field", "border-color", "hover");
-$field-border-color-active: sass.fn-naming-var("field", "border-color", "active");
-$field-border-color-disabled: sass.fn-naming-var("field", "border-color", "disabled");
-$field-background-color: sass.fn-naming-var("field", "background-color");
-$field-color: sass.fn-naming-var("field", "color");
-$field-placeholder-color: sass.fn-naming-var("field", "placeholder-color");
-$field-help-color: sass.fn-naming-var("field", "help-color");
-$field-line: sass.fn-naming-var("field", "line");
-$field-max-line: sass.fn-naming-var("field", "max-line");
-
-$radius-ratio: sass.fn-naming-var("radius-ratio");
-$radius-size: sass.fn-naming-var("radius-size");
-$border-width: sass.fn-naming-var("stroke", "width");
-
-$spacing-x: sass.fn-naming-var("spacing", "x");
-$spacing-y: sass.fn-naming-var("spacing", "y");
-
-$size-font-size: sass.fn-naming-var("font-size");
-$size-control-block-size: sass.fn-naming-var("control-block-size");
-$size-coefficient-x: sass.fn-naming-var("coefficient-x");
-$size-coefficient-y: sass.fn-naming-var("coefficient-y");
-$size-line-height: sass.fn-naming-var("line-height");
-
-$transition-duration: sass.fn-naming-var("duration");
-
-$direction-text-align: sass.fn-naming-var("text-align");
-$direction-justify-content: sass.fn-naming-var("justify-content");
-
-.#{$field} {
-  width: 100%;
-  box-shadow: none !important;
-
-  // Field
-  .#{$field-content} {
-    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;
-    border-color: rgba(#{$field-border-color});
-    border-radius: calc(min(#{$size-control-block-size}, #{$radius-size}) * #{$radius-ratio});
-    border-width: #{$border-width};
-    border-style: solid;
-    overflow: hidden;
-    line-height: 0;
-    height: fit-content;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  // Native password <input> (single node, not wrapped).
-  input.#{$field-input} {
-    padding: calc(#{$spacing-y} * #{$size-coefficient-y})
-      calc(#{$spacing-x} * #{$size-coefficient-x});
-    position: relative;
-    background-color: transparent;
-    z-index: 2;
-    min-height: calc(#{$field-line} * #{$size-control-block-size} - 2 * #{$border-width});
-    max-height: calc(#{$field-max-line} * #{$size-control-block-size} - 2 * #{$border-width});
-    box-sizing: border-box;
-    width: 100%;
-    flex: 1;
-    color: rgba(#{$field-color});
-    caret-color: rgba(#{$field-color});
-    border: none;
-    -webkit-user-select: text;
-    user-select: text;
-    font-size: #{$size-font-size};
-    line-height: #{$size-line-height};
-    overflow: auto;
-    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;
-
-    // Firefox
-    -moz-appearance: textfield;
-    appearance: textfield;
-
-    // Chrome, Edge, Safari
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    &:focus,
-    &:active,
-    &:hover {
-      outline: none;
-      border: none;
-    }
-
-    &::placeholder {
-      color: rgba(#{$field-placeholder-color});
-    }
-  }
-
-  // Message
-  .#{$field-message} {
-    color: rgba(#{$field-background-color});
-    font-size: 0.9em;
-    line-height: 1.5;
-    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;
-  }
-
-  // Help
-  .#{$field-help} {
-    color: rgba(#{$field-help-color});
-    font-size: 0.8em;
-    line-height: 1.5;
-    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;
-  }
-
-  &.focus {
-    .#{$field-content} {
-      border-color: rgba(#{$field-border-color-focus});
-    }
-
-    &.shadow {
-      .#{$field-content} {
-        box-shadow: 0 0 0 0.25rem rgba(#{$field-border-color-focus}, 0.25);
-      }
-    }
-
-    &:not(.shadow) {
-      .#{$field-content} {
-        box-shadow: 0 0 0 calc(#{$border-width} * 1.5) rgba(#{$field-border-color-focus});
-      }
-    }
-  }
-
-  &.hover {
-    .#{$field-content} {
-      border-color: rgba(#{$field-border-color-hover});
-    }
-  }
-
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    input.#{$field-input} {
-      cursor: not-allowed;
-      -webkit-user-select: none;
-      user-select: none;
-    }
-
-    .#{$field-content} {
-      border-color: rgba(#{$field-border-color-disabled});
-    }
-  }
-
-  // Direction
-  input.#{$field-input} {
-    text-align: #{$direction-text-align};
-  }
-}

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

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

@@ -1,123 +0,0 @@
-<style lang="scss" src="./field.scss" scoped></style>
-<template src="./field.html"></template>
-<script lang="ts" setup>
-import { computed, inject, nextTick, onMounted, ref, watch } from "vue";
-import type { FieldProps, FieldEmit } from "./field.type";
-import { cssProperty, cssPrefix } from "../../utils";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<FieldProps>(), {
-  modelValue: "",
-  type: "text",
-  size: "standard",
-  role: undefined,
-  shape: undefined,
-  disabled: false,
-  readonly: false,
-  message: "",
-  help: "",
-  variant: "outline",
-  placeholder: "",
-  shadow: undefined,
-  direction: undefined,
-  line: 1,
-  maxLine: 1,
-});
-const emit = defineEmits<FieldEmit>();
-const appState = inject<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 || appState?.role?.value || "";
-  const shape = props.shape || appState?.shape?.value || "";
-  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow?.value) ?? false;
-  const direction = props.direction || appState?.direction?.value || "left";
-
-  return {
-    class: [
-      cssPrefix(["layer", "field"]),
-      cssPrefix(["role", role]),
-      cssPrefix(["shape", shape]),
-      cssPrefix("field"),
-      cssPrefix(["size", props.size]),
-      cssPrefix(["direction", direction]),
-      props.variant,
-      props.type,
-      {
-        disabled: props.disabled,
-        focus: isFocus.value,
-        shadow,
-        readonly: props.readonly,
-      },
-    ],
-    style: {
-      [cssProperty(["field", "line"])]: props.line,
-      [cssProperty(["field", "max-line"])]: props.maxLine || props.line,
-    },
-  };
-});
-
-const rawContent = computed(() => {
-  return props.modelValue ?? props.value ?? "";
-});
-
-const fieldContentAttrs = computed(() => ({
-  class: [cssPrefix("field-content")],
-}));
-
-const fieldInputAttrs = computed(() => ({
-  class: [cssPrefix("field-input")],
-  name: props.name,
-  id: props.id,
-  placeholder: props.placeholder,
-  autocomplete: props.autocomplete,
-  type: props.type,
-  readonly: props.readonly,
-  disabled: props.disabled,
-}));
-
-const fieldMessageAttrs = computed(() => ({
-  class: [cssPrefix("field-message")],
-}));
-
-const fieldHelpAttrs = computed(() => ({
-  class: [cssPrefix("field-help")],
-}));
-
-// 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);
-};
-
-watch(
-  () => rawContent.value,
-  (value) => {
-    content.value = value.toString();
-  }
-);
-
-watch(
-  () => content.value,
-  (value) => {
-    emit("update:modelValue", value.toString());
-  }
-);
-</script>

package/src/components/field/index.ts

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

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

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

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

@@ -1,91 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Classes
-$form-group: sass.fn-naming-prefix("form-group");
-$button: sass.fn-naming-prefix("button");
-$field: sass.fn-naming-prefix("field");
-$field-content: sass.fn-naming-prefix("field-content");
-
-.#{$form-group} {
-  display: flex;
-
-  > :deep(*) {
-    flex: 1;
-
-    &.focus {
-      z-index: 2;
-    }
-  }
-
-  &.horizontal {
-    flex-direction: row;
-
-    :deep(.#{$button}) {
-      &:not(:last-child):not(:first-child) {
-        border-radius: 0;
-      }
-
-      &:first-child:not(:last-child) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      &:last-child:not(:first-child) {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-
-    :deep(.#{$field}) {
-      &:not(:last-child):not(:first-child) .#{$field-content} {
-        border-radius: 0;
-      }
-
-      &:first-child:not(:last-child) .#{$field-content} {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      &:last-child:not(:first-child) .#{$field-content} {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-  }
-
-  &.vertical {
-    flex-direction: column;
-
-    :deep(.#{$button}) {
-      &:not(:last-child):not(:first-child) {
-        border-radius: 0;
-      }
-
-      &:first-child:not(:last-child) {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      &:last-child:not(:first-child) {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-    }
-
-    :deep(.#{$field}) {
-      &:not(:last-child):not(:first-child) .#{$field-content} {
-        border-radius: 0;
-      }
-
-      &:first-child:not(:last-child) .#{$field-content} {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      &:last-child:not(:first-child) .#{$field-content} {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-    }
-  }
-}

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

@@ -1,5 +0,0 @@
-export type FormGroupDirection = "horizontal" | "vertical";
-
-export type FormGroupProps = {
-  direction?: FormGroupDirection;
-};

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

@@ -1,21 +0,0 @@
-<style lang="scss" src="./form-group.scss" scoped></style>
-<template src="./form-group.html"></template>
-<script lang="ts" setup>
-import { cssPrefix } from "../../utils";
-import { computed } from "vue";
-import { type FormGroupProps } from "./form-group.type";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<FormGroupProps>(), {
-  direction: "horizontal",
-});
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const formGroupAttrs = computed(() => {
-  return {
-    class: [cssPrefix("form-group"), props.direction],
-  };
-});
-</script>

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

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

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

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

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

@@ -1,47 +0,0 @@
-@use "@toife/sass-layer" as sass;
-
-// Class name
-$gesture-indicator: sass.fn-naming-prefix("gesture-indicator");
-
-// Property name - layer: gesture-indicator
-$gesture-indicator-border-color: sass.fn-naming-var("gesture-indicator", "border-color");
-$radius-ratio: sass.fn-naming-var("radius-ratio");
-$radius-size: sass.fn-naming-var("radius-size");
-$transition-duration: sass.fn-naming-var("duration");
-
-.#{$gesture-indicator} {
-  background-color: rgba(#{$gesture-indicator-border-color});
-  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;
-  position: absolute;
-  border-radius: calc(min(40px, #{$radius-size}) * #{$radius-ratio});
-  z-index: 99;
-
-  &.bottom {
-    width: 40px;
-    height: 4px;
-    top: 5px;
-  }
-
-  &.top {
-    width: 40px;
-    height: 4px;
-    bottom: 5px;
-  }
-
-  &.left {
-    height: 40px;
-    width: 4px;
-    right: 5px;
-  }
-
-  &.right {
-    height: 40px;
-    width: 4px;
-    left: 5px;
-  }
-}

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

@@ -1,5 +0,0 @@
-// Type definitions
-export type GestureIndicatorProps = {
-  placement?: string;
-  role?: string;
-};

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

@@ -1,31 +0,0 @@
-<style lang="scss" src="./gesture-indicator.scss" scoped></style>
-<template src="./gesture-indicator.html"></template>
-<script lang="ts" setup>
-import { cssPrefix } from "../../utils";
-import { type GestureIndicatorProps } from "./gesture-indicator.type";
-import { computed, inject } from "vue";
-import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = withDefaults(defineProps<GestureIndicatorProps>(), {
-  placement: "bottom",
-  role: undefined,
-});
-const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
-
-// Computed properties
-// ----------------------------------------------------------------------------
-const gestureIndicatorAttrs = computed(() => {
-  const role = props.role || appState?.role.value || "";
-
-  return {
-    class: [
-      cssPrefix(["layer", "gesture-indicator"]),
-      cssPrefix(["role", role]),
-      cssPrefix("gesture-indicator"),
-      props.placement,
-    ],
-  };
-});
-</script>

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

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

package/src/components/image/image.html

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

package/src/components/image/image.type.ts

@@ -1,5 +0,0 @@
-// Type definitions
-export type ImageProps = {
-  defaultSrc?: string;
-  src?: string;
-};

package/src/components/image/image.vue

@@ -1,29 +0,0 @@
-<template src="./image.html"></template>
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import { type ImageProps } from "./image.type";
-
-// Component setup (props, emits, injects)
-// ----------------------------------------------------------------------------
-const props = defineProps<ImageProps>();
-
-// Reactive state
-// ----------------------------------------------------------------------------
-// Initialize from src to avoid an empty src flash before mount
-const dataSrc = ref<string>(props.src ?? "");
-
-// Methods
-// ----------------------------------------------------------------------------
-const handleError = () => {
-  if (props.defaultSrc) {
-    dataSrc.value = props.defaultSrc;
-  }
-};
-
-watch(
-  () => props.src,
-  (newVal) => {
-    dataSrc.value = newVal ?? "";
-  }
-);
-</script>

package/src/components/image/index.ts

@@ -1,2 +0,0 @@
-export { default as Image } from "./image.vue";
-export type { ImageProps } from "./image.type";

package/src/components/index.ts

@@ -1,31 +0,0 @@
-export * from "./app";
-export * from "./present";
-export * from "./modal";
-export * from "./gesture-indicator";
-export * from "./layout";
-export * from "./button";
-export * from "./cable";
-export * from "./toolbar";
-export * from "./skeleton";
-export * from "./tabs";
-export * from "./switch";
-export * from "./checkbox";
-export * from "./radio";
-export * from "./card";
-export * from "./toast";
-export * from "./avatar";
-export * from "./divider";
-export * from "./image";
-export * from "./action";
-export * from "./decision-modal";
-export * from "./field";
-export * from "./segmented-field";
-export * from "./container";
-export * from "./refresher";
-export * from "./route";
-export * from "./page";
-export * from "./collapse";
-export * from "./form-group";
-export * from "./dropdown";
-export * from "./select";
-export * from "./slide-range";

package/src/components/layout/flex/flex.html

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