@toife/vue 3.0.6 → 3.1.2

package/README.md

@@ -27,6 +27,8 @@ Usage docs live **next to source** under `src/`. Authoring scaffold: [docs/templ
 | [field.md](src/components/field/field.md) | `t-field` |
 | [form-group.md](src/components/form-group/form-group.md) | `t-form-group` |
 | [gesture-indicator.md](src/components/gesture-indicator/gesture-indicator.md) | `t-gesture-indicator` |
+| [grid.md](src/components/grid/grid/grid.md) | `t-grid` |
+| [grid-item.md](src/components/grid/grid-item/grid-item.md) | `t-grid-item` |
 | [image.md](src/components/image/image.md) | `t-image` |
 | [modal.md](src/components/modal/modal.md) | `t-modal` |
 | [page.md](src/components/page/page.md) | `t-page` |
@@ -62,7 +64,7 @@ Usage docs live **next to source** under `src/`. Authoring scaffold: [docs/templ
 | `vue` ^3.5 | Required |
 | `vue-router` ^4 | Required when using route-related components |
 | `@toife/gesture` | Gestures |
-| `@toife/sass-layer-generator` | Component SCSS uses `@use`; install in the app and configure Sass (e.g. Vite `css.preprocessorOptions`) |
+| `@toife/sass-layer` | Component SCSS uses `@use`; install in the app and configure Sass (e.g. Vite `css.preprocessorOptions`) |
 
 ## Installation
 
@@ -217,7 +219,7 @@ See [src/utils/element.md](src/utils/element.md), [src/utils/events.md](src/util
 
 ## Sass / theming
 
-Component styles use `@use "@toife/sass-layer-generator"` and SCSS under `src`. Configure **sass-embedded** / **sass** and any aliases in **your** app so tokens, layers, and variables resolve when you build.
+Component styles use `@use "@toife/sass-layer"` and SCSS under `src`. Configure **sass-embedded** / **sass** and any aliases in **your** app so tokens, layers, and variables resolve when you build.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toife/vue",
-  "version": "3.0.6",
+  "version": "3.1.2",
   "description": "A Frontend framework for Vue",
   "type": "module",
   "sideEffects": false,
@@ -30,8 +30,6 @@
     "registry": "https://registry.npmjs.org/"
   },
   "peerDependencies": {
-    "@toife/gesture": "^1.1.4",
-    "@toife/sass-layer-generator": "^1.0.9",
     "vue": "^3.5.0",
     "vue-router": "^4.0.0"
   },
@@ -48,7 +46,8 @@
   "devDependencies": {
     "@commitlint/cli": "^20.4.4",
     "@commitlint/config-conventional": "^20.4.4",
-    "@toife/sass-layer-generator": "^1.0.9",
+    "@toife/gesture": "^1.1.5",
+    "@toife/sass-layer": "^1.0.2",
     "@types/node": "^25.0.3",
     "@vitejs/plugin-vue": "^6.0.1",
     "husky": "^9.1.7",
@@ -60,8 +59,5 @@
     "vue": "^3.5.0",
     "vue-router": "^4.0.0"
   },
-  "packageManager": "yarn@4.12.0",
-  "dependencies": {
-    "@toife/gesture": "^1.1.4"
-  }
+  "packageManager": "yarn@4.12.0"
 }

package/src/components/action/action.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $action: sass.fn-naming-prefix("action");

package/src/components/app/app.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $app: sass.fn-naming-prefix("app");

package/src/components/avatar/avatar.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class
 $avatar: sass.fn-naming-prefix("avatar");

package/src/components/button/button.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $button: sass.fn-naming-prefix("button");

package/src/components/cable/cable.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $cable: sass.fn-naming-prefix("cable");

package/src/components/card/card/card.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $card: sass.fn-naming-prefix("card");

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/card/card-body/card-body.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $card-body: sass.fn-naming-prefix("card-body");

package/src/components/card/card-footer/card-footer.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $card-footer: sass.fn-naming-prefix("card-footer");

package/src/components/card/card-header/card-header.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $card-header: sass.fn-naming-prefix("card-header");

package/src/components/checkbox/checkbox.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Classes
 $checkbox: sass.fn-naming-prefix("checkbox");

package/src/components/collapse/collapse.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class
 $collapse: sass.fn-naming-prefix("collapse");

package/src/components/container/container.scss

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $container: sass.fn-naming-prefix("container");

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

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class name
 $decision-modal: sass.fn-naming-prefix("decision-modal");
@@ -11,6 +11,7 @@ $shape-pill: sass.fn-naming-prefix("shape-pill");
 // Property name - layer: decision-modal
 $decision-modal-background-color: sass.fn-naming-var("decision-modal", "background-color");
 $decision-modal-border-color: sass.fn-naming-var("decision-modal", "border-color");
+$decision-modal-color: sass.fn-naming-var("decision-modal", "color");
 
 $border-radius: sass.fn-naming-var("border-radius");
 $width: sass.fn-naming-var("viewport", "width");
@@ -26,6 +27,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
 .#{$decision-modal} {
   // Styles
   background-color: rgb(#{$decision-modal-background-color});
+  color: rgb(#{$decision-modal-color});
   width: #{$width};
   max-width: #{$max-width};
   overflow: hidden;
@@ -47,6 +49,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     align-items: center;
     font-weight: 600;
     border-bottom: #{$border-width} solid transparent;
+    color: rgb(#{$decision-modal-color});
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,
@@ -58,12 +61,14 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
   // Content of alert
   .#{$decision-modal-body} {
     padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
+    color: rgb(#{$decision-modal-color});
   }
 
   // Footer of alert
   .#{$decision-modal-footer} {
     display: flex;
     border-top: #{$border-width} solid transparent;
+    color: rgb(#{$decision-modal-color});
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,

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

@@ -1,4 +1,4 @@
-@use "@toife/sass-layer-generator" as sass;
+@use "@toife/sass-layer" as sass;
 
 // Class
 $divider: sass.fn-naming-prefix("divider");

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,68 @@
+@use "@toife/sass-layer" as sass;
+
+// Class name
+$dropdown: sass.fn-naming-prefix("dropdown");
+$dropdown-panel: sass.fn-naming-prefix("dropdown-panel");
+
+// Property name - layer: dropdown
+$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%;
+}
+
+.#{$dropdown-panel} {
+  position: absolute;
+  z-index: 20;
+  min-width: 100%;
+  box-sizing: border-box;
+  border-radius: #{$border-radius};
+  border-width: #{$border-width};
+  margin: #{$spacing-y} 0;
+  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};
+  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="fieldInputShellAttrs" v-if="type !== 'password'">
+        <div
+          v-bind="fieldEditableAttrs"
+          @input="onInput"
+          @compositionstart="onCompositionStart"
+          @compositionend="onCompositionEnd"
+          @focus="onFocus"
+          @blur="onBlur"
+          @beforeinput="onBeforeinput"
+          ref="contentRef"
+        ></div>
+      </div>
+      <input
+        v-bind="fieldPasswordInputAttrs"
+        @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>