@flitsmeister/design-system 2.2.22 → 2.2.33

package/README.md

@@ -31,11 +31,13 @@ Design tokens are exported as platform-specific files in `tokens/schema_exports/
 You can import individual Vue components directly from the package:
 
 ```js
-import { fmxButton, fmxInput } from "@flitsmeister/design-system";
+import { fmxButton, fmxInput, fmxDropdown } from "@flitsmeister/design-system";
 ```
 
 These are standard Vue 3 single-file components. Register and use them in your app as you would any other Vue component.
 
+**fmxDropdown** is a v-model select component. Pass `options` as an array of `{ value, label }`, and bind `v-model` to the selected value. Use the `option` slot to customize option rendering. Set `fullScreen` to true for a mobile-friendly modal overlay.
+
 ### 3. Using Icons
 
 SVG icon files are available via the `icons/` export path. You can import any icon directly:
@@ -52,7 +54,7 @@ You can also reference icons by their path for use in `<img>`, `<svg>`, or as as
 
 ## About the Design System
 
-- Provides Flitsmeister design system colors, typography, buttons, icons, and input components.
+- Provides Flitsmeister design system colors, typography, buttons, icons, input, and dropdown components.
 - Design tokens are managed and exported from Figma, with automated scripts generating platform-specific outputs (CSS, iOS JSON, Android XML, etc.).
 - See the `/tokens/schema_exports/` directory for all available exports.
 

package/index.js

@@ -1,3 +1,4 @@
 export { default as fmxInput } from './web/components/fmxInput.vue';
 export { default as fmxButton } from './web/components/fmxButton.vue';
+export { default as fmxDropdown } from './web/components/fmxDropdown.vue';
 

package/package.json

@@ -1,12 +1,13 @@
 {
     "name": "@flitsmeister/design-system",
-    "version": "2.2.22",
+    "version": "2.2.33",
     "description": "Flitsmeister design system and demo site",
     "main": "index.js",
     "exports": {
         ".": "./index.js",
         "./fmxInput": "./web/components/fmxInput.vue",
         "./fmxButton": "./web/components/fmxButton.vue",
+        "./fmxDropdown": "./web/components/fmxDropdown.vue",
         "./main.css": "./dist-lib/main.css",
         "./themes/*": "./tokens/schema_exports/*",
         "./components/*": "./web/components/*",

package/web/components/fmxButton.vue

@@ -1,5 +1,6 @@
 <template>
   <button
+    :type="type"
     :class="buttonClasses"
     :title="title"
     :href="href"
@@ -9,23 +10,26 @@
     :data-buttontype="buttontype"
     :data-size="size"
   >
-    <span
+    <Icon
       v-if="icon && iconPosition === 'prepend'"
-      class="icon"
-      >{{ icon }}</span
-    >
+      icon-class="mr-2"
+      :name="icon"
+    />
     <slot></slot>
-    <span
+    <Icon
       v-if="icon && iconPosition === 'append'"
-      class="icon"
-      >{{ icon }}</span
-    >
+      icon-class="ml-2"
+      :name="icon"
+    />
   </button>
 </template>
 
 <script>
+  import Icon from "./Icon.vue";
+
   export default {
     name: "fmxButton",
+    components: { Icon },
     props: {
       type: {
         type: String,
@@ -71,6 +75,10 @@
         validator: (value) =>
           ["filled", "text", "outline", "squared"].includes(value),
       },
+      /**
+       * Optional icon: symbol id for the SVG sprite.
+       * The consuming app must inject an SVG sprite containing symbols with these ids (e.g. via Vite/Webpack sprite plugin).
+       */
       icon: {
         type: String,
         default: "",
@@ -259,10 +267,6 @@
     }
   }
 
-  .icon {
-    margin: 0 0.5rem;
-  }
-
   @keyframes horizontal-shaking {
     0% {
       transform: translateX(0);

package/web/components/fmxDropdown.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="fmx-dropdown relative" ref="dropdownRoot">
+    <label
+      v-if="label"
+      class="block px-1 left-2.5 text-content-defaultalt text-lg mb-1"
+    >
+      {{ label }}
+    </label>
+    <button
+      type="button"
+      :disabled="disabled"
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
+      class="fmx-dropdown-trigger w-full bg-surface-defaulthighest text-content-default text-lg leading-snug border-2 rounded-2xl px-3 py-3 h-[60px] focus:outline-none focus:border-out hover:border-outline-brand inline-flex items-center justify-between disabled:opacity-50 disabled:cursor-not-allowed"
+      :class="[triggerClass, { 'fmx-dropdown-trigger--just-changed': justChanged }]"
+      @click="toggle"
+    >
+      <span class="truncate text-left flex-1">
+        {{ selectedLabel }}
+      </span>
+      <svg
+        class="fmx-dropdown-chevron h-5 w-5 flex-shrink-0 ml-2 transition-transform"
+        :class="{ 'rotate-180': isOpen }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </button>
+
+    <transition name="fmx-dropdown">
+      <div
+        v-if="isOpen && !fullScreen"
+        class="fmx-dropdown-panel absolute left-0 right-0 mt-2 rounded-2xl shadow-lg bg-surface-defaulthighest border-2 border-surface-neutral-default overflow-hidden z-10"
+        role="listbox"
+      >
+        <div class="py-1 max-h-[250px] overflow-y-auto">
+          <button
+            v-for="opt in options"
+            :key="opt.value"
+            type="button"
+            role="option"
+            :aria-selected="opt.value === modelValue"
+            class="fmx-dropdown-option block w-full text-left px-4 py-3 text-lg text-content-default hover:bg-surface-defaulthigher focus:bg-surface-defaulthigher focus:outline-none"
+            :class="{ 'bg-surface-defaulthigher': opt.value === modelValue }"
+            @click="select(opt)"
+          >
+            <slot name="option" :option="opt" :selected="opt.value === modelValue">
+              {{ opt.label }}
+            </slot>
+          </button>
+        </div>
+      </div>
+    </transition>
+
+    <Teleport to="body">
+      <transition name="fmx-dropdown-modal">
+        <div
+          v-if="isOpen && fullScreen"
+          class="fmx-dropdown-overlay fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm bg-white/30"
+          @click.self="close"
+        >
+          <div
+            class="fmx-dropdown-modal-panel bg-surface-defaulthighest rounded-2xl shadow-lg border-2 border-surface-neutral-default overflow-hidden w-[min(300px,90vw)] max-h-[80vh] flex flex-col"
+            role="listbox"
+          >
+            <div class="py-1 overflow-y-auto max-h-[250px]">
+              <button
+                v-for="opt in options"
+                :key="opt.value"
+                type="button"
+                role="option"
+                :aria-selected="opt.value === modelValue"
+                class="fmx-dropdown-option block w-full text-left px-4 py-3 text-lg text-content-default hover:bg-surface-defaulthigher focus:bg-surface-defaulthigher focus:outline-none"
+                :class="{ 'bg-surface-defaulthigher': opt.value === modelValue }"
+                @click="select(opt)"
+              >
+                <slot name="option" :option="opt" :selected="opt.value === modelValue">
+                  {{ opt.label }}
+                </slot>
+              </button>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </Teleport>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'fmxDropdown',
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: null,
+    },
+    options: {
+      type: Array,
+      default: () => [],
+      validator(opts) {
+        return opts.every((o) => o && typeof o.value !== 'undefined' && typeof o.label === 'string')
+      },
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    triggerClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+    fullScreen: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      isOpen: false,
+      justChanged: false,
+      changeTimeout: null,
+    }
+  },
+  computed: {
+    selectedLabel() {
+      const opt = this.options.find((o) => o.value === this.modelValue)
+      return opt ? opt.label : this.placeholder
+    },
+  },
+  methods: {
+    toggle() {
+      if (this.disabled) return
+      this.isOpen = !this.isOpen
+    },
+    close() {
+      this.isOpen = false
+    },
+    select(opt) {
+      const changed = opt.value !== this.modelValue
+      this.$emit('update:modelValue', opt.value)
+      this.isOpen = false
+      if (!changed) return
+      if (this.changeTimeout) clearTimeout(this.changeTimeout)
+      this.justChanged = true
+      this.changeTimeout = setTimeout(() => {
+        this.justChanged = false
+        this.changeTimeout = null
+      }, 200)
+    },
+    handleClickOutside(e) {
+      if (this.$refs.dropdownRoot && !this.$refs.dropdownRoot.contains(e.target)) {
+        this.isOpen = false
+      }
+    },
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside)
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.handleClickOutside)
+    if (this.changeTimeout) clearTimeout(this.changeTimeout)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.fmx-dropdown-trigger {
+  border-color: var(--color-surface-neutral-default);
+  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
+}
+.fmx-dropdown-trigger--just-changed {
+  background-color: var(--color-surface-defaulthigher);
+}
+.fmx-dropdown-panel,
+.fmx-dropdown-modal-panel {
+  border-color: var(--color-surface-neutral-default);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fmx-dropdown-trigger {
+    transition-duration: 0.01ms;
+  }
+}
+</style>
+
+<style lang="scss">
+.fmx-dropdown-enter-active,
+.fmx-dropdown-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.fmx-dropdown-enter-from,
+.fmx-dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.fmx-dropdown-modal-enter-active,
+.fmx-dropdown-modal-leave-active {
+  &,
+  .fmx-dropdown-modal-panel {
+    transition: all 0.2s ease-out;
+  }
+}
+.fmx-dropdown-modal-enter-from,
+.fmx-dropdown-modal-leave-to {
+  opacity: 0;
+  .fmx-dropdown-modal-panel {
+    transform: scale(1.05) translateY(-12px);
+  }
+}
+</style>

package/web/components/fmxInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="inputgroup w-full max-w-sm min-w-[200px] mb-6"
+    class="inputgroup w-full mb-6"
     :class="[customClass]"
     :data-inputgroup-type="type"
   >
@@ -9,41 +9,91 @@
         :type="type"
         :value="modelValue"
         @input="handleInput"
+        @focus="handleFocus"
         @blur="handleBlur"
         :disabled="disabled"
         :readonly="readonly"
-        class="peer w-full bg-surface-defaulthighest text-content-default text-lg leading-snug border-2 rounded-2xl px-3 pt-6 pb-1 transition duration-300 ease focus:outline-none focus:border-out"
-        :class="inputClass"
+        :maxlength="maxLength"
+        :autocomplete="autocomplete"
+        class="peer w-full bg-surface-defaulthighest text-content-default border-2 transition duration-300 ease focus:outline-none focus:border-out autofill:bg-surface-defaulthighest autofill:text-content-default"
+        :class="[
+          inputStateClass,
+          sizeConfig.input,
+          placeholder ? sizeConfig.inputWithPlaceholder : sizeConfig.inputWithoutPlaceholder,
+          inputClass,
+        ]"
+        :style="{ letterSpacing: letterSpacing + 'em' }"
       />
       <label
+        v-if="placeholder"
         :class="[
-          'absolute px-1 left-2.5 top-3.5 text-content-defaultalt text-lg transition-all transform origin-left pointer-events-none',
-          labelClass,
+          'absolute px-1 left-2.5 text-content-defaultalt transition-all transform origin-left pointer-events-none',
+          sizeConfig.label,
+          sizeConfig.labelText,
+          sizeConfig.labelFocused,
+          labelFilledClass,
         ]"
       >
         {{ placeholder }}
       </label>
       <transition name="icon-scale">
         <span
-          class="iconwrapper absolute right-3 top-2.5"
-          :class="iconClass"
+          v-if="icon"
+          class="iconwrapper absolute"
+          :class="[sizeConfig.icon, iconClass]"
         >
           <Icon :name="icon" />
         </span>
       </transition>
     </div>
     <p
-      v-if="errorMessage"
+      v-if="errorMessage && !isFocused"
       class="text-content-danger text-sm font-bold mt-1"
-    >
-      {{ errorMessage }}
-    </p>
+      v-html="errorMessage"
+    />
   </div>
 </template>
 
 <script>
   import Icon from "./Icon.vue";
 
+  const SIZE_CONFIG = {
+    sm: {
+      input: "h-10 text-base rounded-2xl px-3 autofill:pt-5 autofill:pb-1",
+      inputWithPlaceholder: "pt-5 pb-1",
+      inputWithoutPlaceholder: "py-2 flex items-center justify-center",
+      label: "top-2.5",
+      labelText: "text-base",
+      labelFocused:
+        "peer-focus:top-[4px] peer-focus:left-2.5 peer-focus:text-xs peer-focus:font-bold peer-autofill:top-[4px] peer-autofill:left-2.5 peer-autofill:text-xs peer-autofill:font-bold",
+      labelFilled: "top-[4px] left-2.5 text-xs font-bold",
+      icon: "right-2 top-2.5 text-xl leading-none",
+    },
+    md: {
+      input:
+        "h-[60px] text-lg leading-snug rounded-2xl px-3 autofill:pt-6 autofill:pb-1",
+      inputWithPlaceholder: "pt-6 pb-1",
+      inputWithoutPlaceholder: "py-3 flex items-center justify-center",
+      label: "top-3.5",
+      labelText: "text-lg",
+      labelFocused:
+        "peer-focus:top-[6px] peer-focus:left-2.5 peer-focus:text-sm peer-focus:font-bold peer-autofill:top-[6px] peer-autofill:left-2.5 peer-autofill:text-sm peer-autofill:font-bold",
+      labelFilled: "top-[6px] left-2.5 text-sm font-bold",
+      icon: "right-2 top-4 text-2xl leading-none",
+    },
+    lg: {
+      input: "h-14 text-lg rounded-2xl px-4 autofill:pt-7 autofill:pb-1",
+      inputWithPlaceholder: "pt-7 pb-1",
+      inputWithoutPlaceholder: "py-4 flex items-center justify-center",
+      label: "top-4",
+      labelText: "text-lg",
+      labelFocused:
+        "peer-focus:top-[8px] peer-focus:left-2.5 peer-focus:text-sm peer-focus:font-bold peer-autofill:top-[8px] peer-autofill:left-2.5 peer-autofill:text-sm peer-autofill:font-bold",
+      labelFilled: "top-[8px] left-2.5 text-sm font-bold",
+      icon: "right-3 top-5 text-2xl leading-none",
+    },
+  };
+
   export default {
     name: "fmxInput",
     components: {
@@ -60,7 +110,7 @@
       },
       placeholder: {
         type: String,
-        default: "Type Here...",
+        default: "",
       },
       modelValue: {
         type: [String, Number],
@@ -78,68 +128,121 @@
         type: Boolean,
         default: false,
       },
+      maxLength: {
+        type: Number,
+        default: null,
+      },
+      letterSpacing: {
+        type: Number,
+        default: 0,
+      },
+      autocomplete: {
+        type: String,
+        default: "",
+      },
       customClass: {
         type: String,
         default: "",
       },
+      inputClass: {
+        type: [String, Array, Object],
+        default: "",
+      },
+      size: {
+        type: String,
+        default: "md",
+        validator: (value) => ["sm", "md", "lg"].includes(value),
+      },
     },
+    emits: ["update:modelValue", "focus", "blur"],
     data() {
       return {
         errorMessage: "",
         icon: "",
         iconClass: "text-current",
+        isFocused: false,
       };
     },
+    watch: {
+      modelValue: {
+        immediate: true,
+        handler(newValue) {
+          if (!this.isFocused && newValue?.length > 0) {
+            this.runValidation(newValue);
+          }
+        },
+      },
+    },
     computed: {
-      inputClass() {
+      sizeConfig() {
+        return SIZE_CONFIG[this.size] || SIZE_CONFIG.md;
+      },
+      inputStateClass() {
         return {
-          "border-outline-danger": this.errorMessage,
+          "border-outline-danger": this.errorMessage && !this.isFocused,
+          "border-outline-brand": this.isFocused,
           "border-transparent focus:border-outline-brand hover:border-outline-brand":
             !this.errorMessage,
         };
       },
-      labelClass() {
-        return {
-          "peer-focus:top-[6px] peer-focus:left-2.5 peer-focus:text-sm peer-focus:font-bold": true,
-          "top-[6px] left-2.5 text-sm font-bold":
-            this.modelValue && this.modelValue.length > 0,
-        };
+      labelFilledClass() {
+        return this.modelValue && this.modelValue.length > 0
+          ? this.sizeConfig.labelFilled
+          : "";
       },
     },
     methods: {
       handleInput(event) {
-        this.$emit("update:modelValue", event.target.value);
+        const value = event.target.value;
+        this.$emit("update:modelValue", value);
+      },
+      handleFocus(event) {
+        this.isFocused = true;
+        this.iconClass = "";
+        this.icon = "";
+        this.$emit("focus", event);
       },
-      handleBlur() {
+      handleBlur(event) {
+        this.isFocused = false;
         this.runValidation(this.modelValue);
+        this.$emit("blur", event);
       },
       runValidation(value) {
-        for (let rule of this.rules) {
+        for (const rule of this.rules) {
           const error = rule(value);
           if (error) {
             this.errorMessage = error;
             this.iconClass = "text-content-danger";
             this.icon = "stroke-warning";
             return;
-          } else {
-            this.errorMessage = "";
-            this.iconClass = "text-content-brand";
-            this.icon = "bold-check";
           }
+          this.errorMessage = "";
+          this.iconClass = "text-content-brand";
+          this.icon = "bold-check";
         }
       },
+      validate() {
+        this.runValidation(this.modelValue);
+      },
     },
   };
 </script>
 
 <style scoped>
+  .inputgroup {
+    min-width: 100px;
+  }
+
   .icon-scale-enter-active,
   .icon-scale-leave-active {
     transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
   }
-  .icon-scale-enter-from, .icon-scale-leave-to /* .icon-scale-leave-active in <2.1.8 */ {
-    transform: scale(0);
+
+  .icon-scale-enter-from,
+  .icon-scale-leave-to {
+    transform: scale(0) translateX(100%);
   }
+
   .icon-scale-enter-to,
   .icon-scale-leave-from {
     transform: scale(1);
@@ -147,11 +250,12 @@
 
   span.iconwrapper {
     display: block;
-    height: 2.25rem;
-    width: 2.25rem;
-    svg {
-      width: 100%;
-      height: 100%;
-    }
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+  span.iconwrapper svg {
+    width: 100%;
+    height: 100%;
   }
 </style>