@flitsmeister/design-system 2.2.36 → 3.0.1

package/web/components/fmxButton.vue

@@ -1,287 +0,0 @@
-<template>
-  <button
-    :type="type"
-    :class="buttonClasses"
-    :title="title"
-    :href="href"
-    :target="target"
-    :disabled="disabled"
-    :data-role="role"
-    :data-buttontype="buttontype"
-    :data-size="size"
-  >
-    <Icon
-      v-if="icon && iconPosition === 'prepend'"
-      icon-class="mr-2"
-      :name="icon"
-    />
-    <slot></slot>
-    <Icon
-      v-if="icon && iconPosition === 'append'"
-      icon-class="ml-2"
-      :name="icon"
-    />
-  </button>
-</template>
-
-<script>
-  import Icon from "./Icon.vue";
-
-  export default {
-    name: "fmxButton",
-    components: { Icon },
-    props: {
-      type: {
-        type: String,
-        default: "button",
-        validator: (value) => ["button", "submit", "reset"].includes(value),
-      },
-      title: {
-        type: String,
-      },
-      href: {
-        type: String,
-        default: "/",
-      },
-      target: {
-        type: String,
-        default: "_self",
-      },
-      size: {
-        type: String,
-        default: "md",
-        validator: (value) => ["sm", "md", "lg", "xl"].includes(value),
-      },
-      role: {
-        type: String,
-        default: "strong",
-        validator: (value) =>
-          [
-            "primary",
-            "secondary",
-            "success",
-            "warning",
-            "danger",
-            "dangeralt",
-            "danger-alt",
-            "info",
-            "strong",
-            "weak",
-          ].includes(value),
-      },
-      buttontype: {
-        type: String,
-        default: "filled",
-        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: "",
-      },
-      iconPosition: {
-        type: String,
-        default: "prepend",
-        validator: (value) => ["prepend", "append"].includes(value),
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      customClasses: {
-        type: String,
-        default: "",
-      },
-    },
-    computed: {
-      buttonClasses() {
-        return `btn btn-size-${this.size} btn-role-${this.role} btn-buttontype-${this.buttontype} ${this.customClasses}`;
-      },
-    },
-  };
-</script>
-
-<style scoped>
-    @reference "../styles/main.pcss";
-
-  .btn {
-    @apply inline-flex items-center cursor-pointer border-none transition-all duration-200;
-
-    &:not([disabled]) {
-      @apply hover:scale-105 active:scale-100 active:opacity-80;
-    }
-
-    + .btn {
-      margin-left: 1em;
-    }
-
-    /*
-      SIZES
-      sm: 'text-base h-10 px-2 font-medium',
-      md: 'text-lg h-12 px-4 font-bold',
-      lg: 'text-2xl h-[60px] py-3 px-6 font-bold',
-      xl: 'text-3xl h-20 py-md px-8 font-extrabold'
-    */
-    &[data-size="sm"] {
-      @apply text-base h-10 px-3 font-medium;
-    }
-
-    &[data-size="md"] {
-      @apply text-lg h-12 px-4 font-bold;
-    }
-
-    &[data-size="lg"] {
-      @apply text-2xl h-[60px] px-6 font-bold;
-    }
-
-    &[data-size="xl"] {
-      @apply text-3xl h-20 px-8 font-extrabold;
-    }
-
-    /* border-radius per variant */
-    &[data-buttontype="filled"] {
-      @apply rounded-full;
-    }
-
-    &[data-buttontype="text"],
-    &[data-buttontype="outline"],
-    &[data-buttontype="squared"] {
-      &[data-size="sm"] {
-        @apply rounded-lg;
-      }
-
-      &[data-size="md"] {
-        @apply rounded-xl;
-      }
-
-      &[data-size="lg"] {
-        @apply rounded-2xl;
-      }
-
-      &[data-size="xl"] {
-        @apply rounded-3xl;
-      }
-    }
-
-    /*
-      ROLES
-      primary: 'bg-surface-brand  text-content-label',
-      secondary: 'bg-surface-brandalt  text-content-brand',
-      success: 'bg-surface-success  text-content-label',
-      warning: 'bg-surface-warning  text-content-label',
-      danger: 'bg-surface-danger  text-content-label',
-      dangeralt: 'bg-surface-dangeralt  text-content-danger',
-      info: 'bg-surface-info  text-content-label',
-      strong: 'bg-black text-white',
-      weak: 'bg-white text-content-brand'
-    */
-
-    /* color schemes per variant */
-    &[data-buttontype="filled"],
-    &[data-buttontype="squared"] {
-      &[data-role="primary"] {
-        @apply bg-surface-brand text-content-label;
-      }
-
-      &[data-role="secondary"] {
-        @apply bg-surface-brandalt text-content-brand;
-      }
-
-      &[data-role="success"] {
-        @apply bg-surface-success text-content-label;
-      }
-
-      &[data-role="warning"] {
-        @apply bg-surface-warning text-content-label;
-      }
-
-      &[data-role="danger"] {
-        @apply bg-surface-danger text-content-label;
-      }
-
-      &[data-role="dangeralt"], &[data-role="danger-alt"] {
-        @apply bg-surface-dangeralt text-content-danger;
-      }
-
-      &[data-role="info"] {
-        @apply bg-surface-info text-content-label;
-      }
-
-      &[data-role="strong"] {
-        @apply bg-black text-white;
-      }
-
-      &[data-role="weak"] {
-        @apply bg-white text-content-default;
-      }
-    }
-
-    &[data-buttontype="text"],
-    &[data-buttontype="outline"] {
-      &[data-role="primary"] {
-        @apply text-content-brand;
-      }
-
-      &[data-role="secondary"] {
-        @apply text-content-defaultalt;
-      }
-
-      &[data-role="success"] {
-        @apply text-content-success;
-      }
-
-      &[data-role="warning"] {
-        @apply text-content-warning;
-      }
-
-      &[data-role="danger"] {
-        @apply text-content-danger;
-      }
-
-      &[data-role="info"] {
-        @apply text-content-info;
-      }
-    }
-
-    body &[class][disabled][data-buttontype][data-role] {
-      @apply cursor-not-allowed;
-      @apply bg-surface-default text-content-weak;
-
-      &:active {
-        animation: horizontal-shaking 0.2s ease 1;
-      }
-    }
-
-    /* border per variant */
-    &[data-buttontype="outline"] {
-      @apply border border-solid border-current;
-      border-width: 3px;
-    }
-  }
-
-  @keyframes horizontal-shaking {
-    0% {
-      transform: translateX(0);
-    }
-
-    25% {
-      transform: translateX(3px);
-    }
-
-    50% {
-      transform: translateX(-3px);
-    }
-
-    75% {
-      transform: translateX(3px);
-    }
-
-    100% {
-      transform: translateX(0);
-    }
-  }
-</style>

package/web/components/fmxDropdown.vue

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