@toife/vue 3.0.6 → 3.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toife/vue",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "A Frontend framework for Vue",
   "type": "module",
   "sideEffects": false,
@@ -31,7 +31,6 @@
   },
   "peerDependencies": {
     "@toife/gesture": "^1.1.4",
-    "@toife/sass-layer-generator": "^1.0.9",
     "vue": "^3.5.0",
     "vue-router": "^4.0.0"
   },
@@ -48,7 +47,6 @@
   "devDependencies": {
     "@commitlint/cli": "^20.4.4",
     "@commitlint/config-conventional": "^20.4.4",
-    "@toife/sass-layer-generator": "^1.0.9",
     "@types/node": "^25.0.3",
     "@vitejs/plugin-vue": "^6.0.1",
     "husky": "^9.1.7",
@@ -62,6 +60,7 @@
   },
   "packageManager": "yarn@4.12.0",
   "dependencies": {
-    "@toife/gesture": "^1.1.4"
+    "@toife/gesture": "^1.1.4",
+    "@toife/sass-layer-generator": "^1.1.0"
   }
 }

package/src/components/card/card/card.vue

@@ -46,7 +46,7 @@ const cardAttrs = computed(() => {
 
 const cardProviderState = computed(() => {
   return {
-    role: props.role,
+    role: role.value,
     shape: shape.value,
     divider: divider.value,
   };

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

@@ -36,19 +36,17 @@ 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(() => {
+  const role = props.role || appState?.role.value || "";
+
   return {
     class: [
       withPrefix(["layer", "decision-modal"]),
-      withPrefix(["role", role.value]),
+      withPrefix(["role", role]),
       withPrefix(["shape", shape.value]),
       withPrefix("decision-modal"),
       {

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

@@ -0,0 +1,74 @@
+@use "@toife/sass-layer-generator" as sass;
+
+$dropdown: sass.fn-naming-prefix("dropdown");
+$dropdown-panel: sass.fn-naming-prefix("dropdown-panel");
+
+$dropdown-border-color: sass.fn-naming-var("dropdown", "border-color");
+$dropdown-background-color: sass.fn-naming-var("dropdown", "background-color");
+$dropdown-color: sass.fn-naming-var("dropdown", "color");
+$border-radius: sass.fn-naming-var("border-radius");
+$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-line-height: sass.fn-naming-var("line-height");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$dropdown} {
+  position: relative;
+  display: block;
+  width: 100%;
+
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.#{$dropdown-panel} {
+  position: absolute;
+  z-index: 20;
+  min-width: 100%;
+  box-sizing: border-box;
+  margin-top: calc(#{$spacing-y} * 0.25);
+  margin-bottom: calc(#{$spacing-y} * 0.25);
+  padding: calc(#{$spacing-y} * 0.5) 0;
+  border-radius: #{$border-radius};
+  border-width: #{$border-width};
+  border-style: solid;
+  border-color: rgb(#{$dropdown-border-color});
+  background-color: rgb(#{$dropdown-background-color});
+  color: rgb(#{$dropdown-color});
+  font-size: #{$size-font-size};
+  line-height: #{$size-line-height};
+  box-shadow: 0 #{$border-width} #{$spacing-y} rgb(#{$dropdown-border-color}, 0.12);
+  max-height: min(50vh, 16rem);
+  overflow-y: auto;
+  transition:
+    border-color #{$transition-duration} ease,
+    background-color #{$transition-duration} ease,
+    color #{$transition-duration} ease,
+    box-shadow #{$transition-duration} ease;
+
+  &.bottom-start {
+    top: 100%;
+    left: 0;
+  }
+
+  &.bottom-end {
+    top: 100%;
+    right: 0;
+    left: auto;
+  }
+
+  &.top-start {
+    bottom: 100%;
+    left: 0;
+  }
+
+  &.top-end {
+    bottom: 100%;
+    right: 0;
+    left: auto;
+  }
+}

package/src/components/dropdown/dropdown.type.ts

@@ -0,0 +1,19 @@
+import type { AppDirection } from "../app";
+
+export type DropdownPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
+
+export type DropdownProps = {
+  modelValue?: boolean;
+  disabled?: boolean;
+  placement?: DropdownPlacement;
+  role?: string;
+  shadow?: boolean;
+  shape?: string;
+  direction?: AppDirection;
+};
+
+export type DropdownEmit = {
+  (e: "update:modelValue", open: boolean): void;
+  (e: "open"): void;
+  (e: "close"): void;
+};

package/src/components/dropdown/dropdown.vue

@@ -0,0 +1,109 @@
+<style lang="scss" src="./dropdown.scss" scoped></style>
+<template src="./dropdown.html"></template>
+<script lang="ts" setup>
+import { computed, inject, onMounted, onUnmounted, ref, watch } from "vue";
+import type { DropdownEmit, DropdownProps } from "./dropdown.type";
+import { withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<DropdownProps>(), {
+  modelValue: false,
+  disabled: false,
+  placement: "bottom-start",
+  role: undefined,
+  shadow: undefined,
+  shape: undefined,
+  direction: undefined,
+});
+const emit = defineEmits<DropdownEmit>();
+const appState = inject<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 ?? appState?.role.value ?? "";
+  const shadow = props.shadow ?? appState?.shadow.value ?? false;
+  const shape = props.shape ?? appState?.shape.value ?? "";
+
+  return {
+    class: [
+      withPrefix(["layer", "dropdown"]),
+      withPrefix(["role", role]),
+      withPrefix(["shape", shape]),
+      withPrefix("dropdown"),
+      {
+        open: isOpen.value,
+        disabled: props.disabled,
+        shadow: shadow,
+      },
+    ],
+  };
+});
+
+const panelAttrs = computed(() => {
+  return {
+    class: [withPrefix("dropdown-panel"), 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,2 @@
+export { default as Dropdown } from "./dropdown.vue";
+export type { DropdownPlacement, DropdownProps, DropdownEmit } from "./dropdown.type";

package/src/components/field/field.html

@@ -1 +1,12 @@
-<OutlineField v-if="props.variant === 'outline'" v-bind="fieldAttrs" />
+<OutlineField v-if="props.variant === 'outline'" v-bind="fieldAttrs">
+  <template #start-input>
+    <slot name="start-input"></slot>
+  </template>
+  <template #input>
+    <slot name="input"></slot>
+  </template>
+  <template #end-input>
+    <slot name="end-input"></slot>
+  </template>
+  <slot></slot>
+</OutlineField>

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

@@ -1,30 +1,34 @@
 <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>
+    <slot name="start-input"></slot>
+    <slot name="input">
+      <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
+      />
+    </slot>
+    <slot name="end-input"></slot>
   </div>
   <div v-bind="fieldMessageAttrs" v-if="message">{{ message }}</div>
   <div v-bind="fieldHelpAttrs" v-if="help">{{ help }}</div>

package/src/components/field/outline/outline.scss

@@ -6,8 +6,6 @@ $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");
-$field-direction-left: sass.fn-naming-prefix("direction", "left");
-$field-direction-right: sass.fn-naming-prefix("direction", "right");
 
 // Property name - layer: field
 $field-border-color: sass.fn-naming-var("field", "border-color");
@@ -30,6 +28,9 @@ $size-line-height: sass.fn-naming-var("line-height");
 
 $transition-duration: sass.fn-naming-var("motion", "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;
@@ -50,6 +51,9 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     line-height: 0;
     height: fit-content;
     position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   // Input
@@ -69,6 +73,8 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     line-height: #{$size-line-height};
     box-sizing: border-box;
     width: 100%;
+    overflow: auto;
+    flex: 1;
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,
@@ -165,7 +171,6 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
         display: block;
         white-space: pre-wrap;
         word-break: break-word;
-        padding: inherit;
         line-height: inherit;
         font-size: inherit;
         display: flex;
@@ -202,25 +207,12 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
   }
 
   // Direction
-  &.#{$field-direction-left} {
-    .#{$field-input} {
-      justify-content: start;
-      text-align: left;
-    }
-
-    .#{$field-input}::before {
-      left: 0;
-    }
+  .#{$field-input} {
+    justify-content: #{$direction-justify-content};
+    text-align: #{$direction-text-align};
   }
 
-  &.#{$field-direction-right} {
-    .#{$field-input} {
-      justify-content: end;
-      text-align: right;
-    }
-
-    .#{$field-input}::before {
-      right: 0;
-    }
+  .#{$field-input}::before {
+    #{$direction-text-align}: 0;
   }
 }

package/src/components/index.ts

@@ -25,3 +25,5 @@ export * from "./route";
 export * from "./page";
 export * from "./collapse";
 export * from "./form-group";
+export * from "./dropdown";
+export * from "./select";

package/src/components/select/index.ts

@@ -0,0 +1,2 @@
+export { default as Select } from "./select.vue";
+export type { SelectVariant, SelectSize, SelectProps } from "./select.type";

package/src/components/select/select.html

@@ -0,0 +1,26 @@
+<div v-bind="selectAttrs">
+  <Dropdown v-bind="dropdownAttrs">
+    <template #trigger="{ toggle, isOpen }">
+      <Field
+        :role="role"
+        variant="outline"
+        @click="toggle"
+        v-bind="fieldAttrs"
+        :class="{focus: isOpen}"
+      >
+        <template #end-input>
+          <span v-bind="selectIconAttrs" :class="{open: isOpen}"></span>
+        </template>
+      </Field>
+    </template>
+    <button
+      v-for="item in menuItems"
+      :key="item"
+      type="button"
+      class="dropdown-demo-row"
+      @click="pickMenu(item)"
+    >
+      {{ item }}
+    </button>
+  </Dropdown>
+</div>

package/src/components/select/select.scss

@@ -0,0 +1,58 @@
+@use "@toife/sass-layer-generator" as sass;
+
+// Class name
+$select: sass.fn-naming-prefix("select");
+$select-icon: sass.fn-naming-prefix("select-icon");
+$field: sass.fn-naming-prefix("field");
+$field-input: sass.fn-naming-prefix("field-input");
+
+// Property name
+$app-color: sass.fn-naming-var("app", "color");
+$spacing-x: sass.fn-naming-var("spacing", "x");
+$size-coefficient-x: sass.fn-naming-var("coefficient-x");
+$transition-duration: sass.fn-naming-var("motion", "duration");
+
+.#{$select} {
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  &.readonly {
+    pointer-events: none;
+  }
+
+  .#{$select-icon} {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-inline-end: calc(#{$spacing-x} * #{$size-coefficient-x} * 0.5);
+    color: inherit;
+    pointer-events: none;
+    width: 0.6rem;
+    height: 0.6rem;
+    border-radius: 0.1rem;
+    border-right: 2px solid rgb(var(--t-app-color));
+    border-bottom: 2px solid rgb(var(--t-app-color));
+    margin: calc(var(--t-spacing-y) * var(--t-coefficient-y))
+      calc(var(--t-spacing-x) * var(--t-coefficient-x));
+    transition: transform #{$transition-duration} ease;
+    transform-origin: center;
+
+    &.open {
+      transform: rotate(225deg);
+    }
+
+    &:not(.open) {
+      transform: rotate(45deg);
+    }
+  }
+
+  // :deep(.#{$field}.focus .#{$select-icon} svg) {
+  //   transform: rotate(180deg);
+  // }
+
+  // :deep(.#{$field-input}) {
+  //   cursor: pointer;
+  // }
+}

package/src/components/select/select.type.ts

@@ -0,0 +1,32 @@
+import type { FieldSize, FieldVariant } from "../field";
+import type { AppDirection } from "../app";
+
+export type SelectVariant = FieldVariant;
+export type SelectSize = FieldSize;
+
+export type SelectProps = {
+  // 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;
+  tabindex?: number | string;
+  line?: number | string;
+  maxLine?: number | string;
+
+  // Support
+  message?: string;
+  help?: string;
+};

package/src/components/select/select.vue

@@ -0,0 +1,89 @@
+<style lang="scss" src="./select.scss" scoped></style>
+<template src="./select.html"></template>
+<script lang="ts" setup>
+import { computed, inject } from "vue";
+import { type SelectProps } from "./select.type";
+import { property, withPrefix } from "../../utils";
+import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
+import { Field } from "../field";
+import { Dropdown } from "../dropdown";
+
+// Component setup (props, emits, injects)
+// ----------------------------------------------------------------------------
+const props = withDefaults(defineProps<SelectProps>(), {
+  modelValue: "",
+  type: "text",
+  size: "standard",
+  disabled: false,
+  readonly: false,
+  message: "",
+  help: "",
+  variant: "outline",
+  placeholder: "",
+  shadow: undefined,
+  direction: undefined,
+});
+const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
+
+// Computed properties
+// ----------------------------------------------------------------------------
+const role = computed(() => {
+  return props.role || appState?.role.value || "";
+});
+
+const direction = computed(() => {
+  return props.direction || appState?.direction?.value || "left";
+});
+
+const shadow = computed(() => {
+  return props.shadow || appState?.shadow.value || false;
+});
+
+const shape = computed(() => {
+  return props.shape || appState?.shape.value || "";
+});
+
+const selectAttrs = computed(() => {
+  return {
+    class: [
+      withPrefix(["layer", "select"]),
+      withPrefix("select"),
+      {
+        disabled: props.disabled,
+        readonly: props.readonly,
+      },
+    ],
+  };
+});
+
+const dropdownAttrs = computed(() => {
+  return {
+    role: role.value,
+    direction: direction.value,
+    shadow: shadow.value,
+    shape: shape.value,
+    disabled: props.disabled,
+    readonly: props.readonly,
+  };
+});
+
+const fieldAttrs = computed(() => {
+  return {
+    modelValue: props.modelValue,
+    size: props.size,
+    message: props.message,
+    help: props.help,
+    variant: props.variant,
+    placeholder: props.placeholder,
+    direction: direction.value,
+    role: role.value,
+    shape: shape.value,
+    readonly: true,
+    shadow: shadow.value,
+  };
+});
+
+const selectIconAttrs = computed(() => ({
+  class: [withPrefix("select-icon")],
+}));
+</script>

package/src/factory.ts

@@ -13,6 +13,7 @@ import {
   Container,
   DecisionModal,
   Divider,
+  Dropdown,
   Field,
   FormGroup,
   GestureIndicator,
@@ -28,6 +29,7 @@ import {
   RouteProvider,
   RouteOutlet,
   SegmentedField,
+  Select,
   Skeleton,
   Switch,
   Tab,
@@ -59,6 +61,7 @@ export const createToife = (options?: CreateToifeOptions) => {
       app.component(prefix + "container", Container);
       app.component(prefix + "decision-modal", DecisionModal);
       app.component(prefix + "divider", Divider);
+      app.component(prefix + "dropdown", Dropdown);
       app.component(prefix + "field", Field);
       app.component(prefix + "form-group", FormGroup);
       app.component(prefix + "gesture-indicator", GestureIndicator);
@@ -72,6 +75,7 @@ export const createToife = (options?: CreateToifeOptions) => {
       app.component(prefix + "route-provider", RouteProvider);
       app.component(prefix + "route-outlet", RouteOutlet);
       app.component(prefix + "segmented-field", SegmentedField);
+      app.component(prefix + "select", Select);
       app.component(prefix + "skeleton", Skeleton);
       app.component(prefix + "switch", Switch);
       app.component(prefix + "tab", Tab);