@energie360/ui-library 0.1.17 → 0.1.18

package/modules/search-filter/search-filter.scss

@@ -0,0 +1,106 @@
+@use '../../base/abstracts' as a;
+
+@mixin collapsed-desktop {
+  grid-template-columns: 100%;
+
+  .search-filter__search {
+    display: flex;
+    column-gap: var(--e-space-4);
+    flex-direction: row-reverse;
+    grid-area: auto;
+  }
+
+  .search-filter__filter-toggle {
+    display: block;
+  }
+
+  .search-filter__filter {
+    display: none;
+    grid-area: auto;
+  }
+
+  &.show-filters {
+    .search-filter__filter {
+      display: grid;
+      grid-template-columns: repeat(calc(var(--field-count) - 1), 1fr);
+    }
+  }
+}
+
+@mixin mobile-filters {
+  @include a.bp(m) {
+    grid-template-columns: 100%;
+
+    .search-filter__search {
+      display: grid;
+      column-gap: var(--e-space-4);
+      grid-template-columns: auto min-content;
+      grid-area: auto;
+    }
+
+    .search-filter__filter {
+      display: none;
+      grid-area: auto;
+      grid-template-columns: 1fr;
+    }
+
+    .search-filter__filter-toggle {
+      flex: 0 0 auto;
+      display: block;
+    }
+
+    &.show-filters {
+      .search-filter__filter {
+        display: grid;
+        grid-template-columns: 1fr;
+      }
+    }
+  }
+}
+
+.search-filter {
+  --field-count: 1;
+
+  display: grid;
+  grid-template-columns: repeat(var(--field-count), minmax(0, 240px));
+  gap: var(--e-space-6) var(--e-space-4);
+
+  @include a.bp(xl) {
+    grid-template-columns: repeat(var(--field-count), 1fr);
+  }
+
+  .search-filter__search {
+    grid-area: 1 / var(--field-count) / 1 / calc(var(--field-count) + 1);
+  }
+
+  .search-filter__filter {
+    display: grid;
+    grid-template-columns: repeat(calc(var(--field-count) - 1), minmax(0, #{a.rem(240)}));
+    gap: var(--e-space-6) var(--e-space-4);
+    grid-area: 1 / 1 / 1 / var(--field-count);
+
+    @include a.bp(xl) {
+      grid-template-columns: repeat(calc(var(--field-count) - 1), 1fr);
+    }
+  }
+
+  .search-filter__filter-toggle {
+    display: none;
+  }
+
+  &.show-filters {
+    .search-filter__filter-toggle .icon-button {
+      &::before {
+        background-color: var(--e-c-primary-01-100);
+        border-color: var(--e-c-primary-01-100);
+      }
+    }
+  }
+
+  @include mobile-filters;
+}
+
+.search-filter.collapsed-desktop {
+  @include collapsed-desktop;
+  @include mobile-filters;
+}

package/modules/search-filter/u-search-filter.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref, useTemplateRef, onMounted } from 'vue'
+import { UIconButton } from '../../elements'
+import { UBadge } from '../../components'
+
+interface Props {
+  activeFilter?: boolean
+}
+
+defineProps<Props>()
+
+const showFilters = ref(false)
+const filtersEl = useTemplateRef('filters')
+const filterCount = ref(0)
+
+onMounted(() => {
+  filterCount.value = filtersEl.value.children.length
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'search-filter',
+      { 'show-filters': showFilters, 'collapsed-desktop': filterCount + 1 >= 4 },
+    ]"
+    :style="{
+      '--field-count': filterCount + 1,
+    }"
+  >
+    <div class="search-filter__search">
+      <slot name="search" />
+
+      <div class="search-filter__filter-toggle">
+        <UBadge
+          dot
+          border
+          :show="activeFilter && !showFilters"
+          color="var(--e-c-secondary-05-500)"
+          :top="11"
+          :right="11"
+        >
+          <UIconButton icon="filter" variant="plain" @click="showFilters = !showFilters" />
+        </UBadge>
+      </div>
+    </div>
+
+    <div ref="filters" class="search-filter__filter">
+      <slot name="filters" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss" src="./search-filter.scss"></style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energie360/ui-library",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -15,6 +15,7 @@
     "./wizard": "./wizard/index.js",
     "./utility/elements/*": "./dist/elements/*",
     "./utility/layout/*": "./dist/layout/*",
+    "./utils/*": "./utils/*",
     "./base/abstracts": "./base/abstracts/index.scss",
     "./styles/form": "./elements/form/form.scss",
     "./styles/form-grid": "./layout/form-grid/form-grid.scss"

package/utils/array/intersect.js

@@ -0,0 +1,7 @@
+/**
+ *
+ * @param {Array} a
+ * @param {Array} b
+ * @returns {Array}
+ */
+export const intersect = (a, b) => a.filter((x) => b.includes(x))

package/utils/functions/breakpoint.js

@@ -1,11 +1,6 @@
 import { mediaquery } from '@energie360/design-tokens/design-tokens.json'
 
-// TODO: return .matches value
-
-export const isSmall = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.s})`)
-
-export const isMedium = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.m})`)
-
-export const isLarge = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.lg})`)
-
-export const isXLarge = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.xl})`)
+export const isSmall = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.s})`).matches
+export const isMedium = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.m})`).matches
+export const isLarge = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.lg})`).matches
+export const isXLarge = () => window.matchMedia(`(max-width: ${mediaquery.breakpoint.xl})`).matches

package/utils/functions/format-bytes.js

@@ -0,0 +1,17 @@
+/**
+ *
+ * @param {number} bytes
+ * @param decimals
+ * @returns {string}
+ */
+export const formatBytes = (bytes, decimals = 2) => {
+  if (!+bytes) return '0 Bytes'
+
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
+}

package/utils/global/mime-types.js

@@ -0,0 +1,8 @@
+// TODO: Add more possible types.
+export const mimeTypes = {
+  'image/png': ['png'],
+  'application/pdf': ['pdf'],
+  'image/jpeg': ['jpeg', 'jpg'],
+  'image/svg+xml': ['svg'],
+  'image/gif': ['gif'],
+}

package/utils/translations/translate.js

@@ -8,6 +8,14 @@ const getLanguage = () => {
   return langAttr === '' ? DEFAULT_LANGUAGE : langAttr
 }
 
-export const getTranslation = (key) => {
-  return translations[getLanguage()][key]
+export const getTranslation = (key, replace) => {
+  let translation = translations[getLanguage()][key]
+
+  if (replace) {
+    for (key in replace) {
+      translation = translation.replace(key, replace[key])
+    }
+  }
+
+  return translation
 }