Frontend Collection

Helpers and Components

Requirements

• Tailwind >= 1.2
• Vue >= 2.6

Helpers

• clickawayDirective
• debounce (func, delay)
• deepFreeze (input)
• deepGet (obj, accessor, defaultValue)
• deepSet (obj, accessor, newValue)
• focusDirective
• formatDate (date = Date.now(), doIncludeSeconds = true)
• formatNum (number, { decimals = 0, forcePrefix = false, html = false } = {})
• hexToRGB (hex)
• throttle (func, limit)
• tween (from, to, cb, { duration = 500, easeIn = 2, easeOut = 2, onDone, isSelfStarting = true } = {}
• typeOf (object)

Components

RichTable

Import

import { RichTable } from '@krknet/fe/components'

Usage

<rich-table
  keyField="_id"
  :isLoading="isLoading"
  :columns="columns"
  :hasActions="true"
  :entries="filteredList"
>
  <template #emptyItem>
    <div class="py-4 italic text-center text-gray-500">
      <div v-if="totalEntries > 0">
        <p>keine passende Einträge</p>
        <button class="py-1 mt-2 text-gray-600 hover:text-gray-800 focus:outline-none" @click="clearSearch">
          <i class="mr-1 fal fa-fw fa-empty-set" />
          <span class="tracking-wider">Suche zurücksetzen</span>
        </button>
      </div>
      <div v-else>
        <p>es sind noch keine Einträge im System hinterlegt</p>
        <button class="py-1 mt-2 text-gray-600 hover:text-gray-800 focus:outline-none" @click="createNew">
          <i class="mr-1 fal fa-fw fa-plus" />
          <span class="tracking-wider">ersten Eintrag anlegen</span>
        </button>
      </div>
    </div>
  </template>
  <template #loadingItem>
    <td class="px-2 py-1 pr-4 loading">Peter Pan</td>
    <td class="px-2 py-1 loading t-num">000-00-00 <span class="text-gray-500">00:00</span></td>
    <td class="px-2 py-1 loading t-num">000-00-00 <span class="text-gray-500">00:00</span></td>
    <td class="px-2 py-1 loading t-num">000-00-00 <span class="text-gray-500">00:00</span></td>
    <td class="px-3 py-1 text-right loading">
      <button class="px-1 py-1 leading-none text-gray-600 sm:text-xs focus:outline-none hover:text-gray-800 focus:text-gray-800" title="bearbeiten">
        <i class="fas fa-fw fa-pen" />
      </button>
    </td>
  </template>
  <template #row="{ entry }">
    <rich-row :entry="entry" @update="updateEntry" @triggerEdit="triggerEdit(entry)" />
  </template>
</rich-table>

vSwitch

Import

import { vSwitch } from '@krknet/fe/components'

Usage

<v-switch :value="view">
  <template #table>TableView</template>
</v-switch>