sprintify-ui 0.10.65 → 0.10.66

package/src/components/BaseAssign.vue

@@ -1,366 +1,366 @@
-<template>
-  <div>
-    <!-- Filters -->
-    <div class="flex items-start flex-wrap gap-4 gap-y-2 mb-3">
-      <div>
-        <p class="text-sm text-slate-600">
-          {{ t('sui.search') }}
-        </p>
-        <!-- Search -->
-        <BaseInput
-          v-model="searchQuery"
-          type="text"
-          :required="false"
-          name="searchQuery"
-          size="sm"
-          :disabled="disabled"
-          :placeholder="t('sui.search')"
-        />
-      </div>
-
-      <div
-        v-for="filter in filters"
-        :key="filter.label"
-      >
-        <p class="text-sm text-slate-600">
-          {{ filter.label }}
-        </p>
-
-        <div class="flex gap-1">
-          <BaseButton
-            v-for="option in filter.options"
-            :key="option.label"
-            type="button"
-            :size-behavior="SizeBehavior.input"
-            size="sm"
-            :color="appliedFilters[filterKey(filter, option)] ? 'info' : ''"
-            :disabled="disabled"
-            @click="toggleFilter(filter, option)"
-          >
-            {{ option.label }}
-          </BaseButton>
-        </div>
-      </div>
-    </div>
-
-    <!-- Selectors -->
-    <div class="flex flex-wrap gap-x-4 gap-y-2 mb-4">
-      <div class="flex items-center text-sm">
-        ({{ modelValueInternal.length }} / {{ options.length }})
-      </div>
-
-      <!-- Select all -->
-      <button
-        type="button"
-        class="text-sm text-blue-500 leading-tight text-left"
-        :disabled="disabled"
-        @click="selectAll"
-      >
-        {{ t('sui.select_all') }}
-      </button>
-
-      <!-- Select custom -->
-      <template
-        v-if="selectors.length"
-      >
-        <button
-          v-for="selector in selectors"
-          :key="selector.label"
-          type="button"
-          class="text-sm text-blue-500 leading-tight text-left"
-          :disabled="disabled"
-          @click="applySelector(selector)"
-        >
-          {{ selector.label }}
-        </button>
-      </template>
-
-      <!-- Unselect all -->
-      <button
-        type="button"
-        class="text-sm text-blue-500 leading-tight text-left"
-        :disabled="disabled"
-        @click="unselectAll"
-      >
-        {{ t('sui.unselect_all') }}
-      </button>
-    </div>
-
-    <!-- items -->
-    <div
-      v-if="filteredItems.length"
-      class="flex flex-wrap"
-    >
-      <label
-        v-for="item in filteredItems"
-        :key="item[primaryKey]"
-        class="flex space-x-2 w-full mb-1 || sm:w-1/3 || xl:w-1/4"
-        :class="[
-          disabled ? 'opacity-50' : 'cursor-pointer',
-        ]"
-      >
-        <input
-          v-model="modelValueInternal"
-          :value="item[primaryKey]"
-          :name="name"
-          class="rounded"
-          type="checkbox"
-          :disabled="disabled"
-        >
-
-        <span class="text-sm">
-          {{ get(item, field) }}
-        </span>
-      </label>
-    </div>
-
-    <div
-      v-else
-      class="flex items-center justify-center flex-grow py-16"
-    >
-      <div class="flex flex-col items-center">
-        <BaseEmptyState class="w-32" />
-
-        <p class="mt-3 text-center text-sm text-slate-600">
-          {{ t('sui.nothing_found') }}
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { t } from '@/i18n';
-import { RawOption } from '@/types';
-import { cloneDeep, get, uniq } from 'lodash';
-import { ref, computed, Ref, PropType } from 'vue';
-import BaseButton from './BaseButton.vue';
-import BaseEmptyState from '@/svg/BaseEmptyState.vue';
-import BaseInput from './BaseInput.vue';
-import { SizeBehavior } from '@/utils/sizeBehaviors';
-
-const emit = defineEmits(["update:modelValue"]);
-
-type Item = Record<string, any>;
-
-type ItemValue = string | number;
-
-interface Selector {
-  label: string;
-  action: (item: Item) => boolean;
-}
-
-interface Filter {
-  label: string;
-  id: string;
-  default?: string;
-  options: FilterOption[]
-}
-
-interface FilterOption {
-  label: string;
-  id: string;
-  action: (item: Item) => boolean;
-}
-
-const props = defineProps({
-  /**
-   * Model value, you may use v-model.
-   */
-  modelValue: {
-    default: undefined,
-    type: [Array, null, undefined] as PropType<string[] | null | undefined>,
-  },
-  /**
-   * List of options to select from
-   */
-  options: {
-    required: true,
-    type: Array as PropType<RawOption[]>,
-  },
-  /**
-   * Field to use as primary key
-   */
-  primaryKey: {
-    default: 'id',
-    type: String,
-  },
-  /**
-   * Field to display 
-   */
-  field: {
-    required: true,
-    type: String,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  name: {
-    default: null,
-    type: String,
-  },
-  /**
-   * Key to filter by
-   */
-  filterKey: {
-    default: null,
-    type: [String, Array, null] as PropType<string | string[]>,
-  },
-  /**
-   * Custom filters
-   * [
-   *   {
-   *     id: 'filterId',
-   *     label: 'Filter label',
-   *     default: 'defaultOptionId',
-   *     options: [
-   *      { id: 'optionId', label: 'Option label', action: (item) => item.field === 'value' }
-   *    ]
-   *   }
-   * ]
-   */
-  filters: {
-    default: () => [],
-    type: Array as PropType<Filter[]>,
-  },
-  /** 
-   * Custom selectors
-   * 
-   * [
-   *  {
-   *   label: 'Selector label',
-   *   action: (item) => item.field === 'value'
-   *  }
-   * ]
-   */
-  selectors: {
-    default: () => [],
-    type: Array as PropType<Selector[]>,
-  },
-});
-
-
-const modelValueInternal: Ref<ItemValue[]> = ref([]);
-
-watch(
-  () => props.modelValue,
-  () => {
-    if (props.modelValue) {
-      modelValueInternal.value = props.modelValue;
-    }
-  },
-  { immediate: true }
-);
-
-watch(
-  () => modelValueInternal.value,
-  () => {
-    if (modelValueInternal.value) {
-      emit('update:modelValue', modelValueInternal.value);
-    }
-  },
-  { immediate: true }
-);
-
-function selectAll() {
-  const currentlySelected = modelValueInternal.value;
-  const itemIds = filteredItems.value.map(item => get(item, props.primaryKey, ''));
-
-  modelValueInternal.value = uniq([...currentlySelected, ...itemIds]);
-}
-
-function unselectAll() {
-  const currentlySelected = modelValueInternal.value;
-  const toRemoveIds = filteredItems.value.map(option => get(option, props.primaryKey, ''));
-  modelValueInternal.value = currentlySelected.filter(id => !toRemoveIds.includes(id));
-}
-
-function applySelector(selector: Selector) {
-  modelValueInternal.value = props.options.filter(option => selector.action(option)).map(option => get(option, props.primaryKey, ''));
-}
-
-// Filters
-
-const searchQuery: Ref<string> = ref('');
-
-const appliedFilters = ref<Record<string, FilterOption>>({});
-
-function filterPrefix(filter: Filter): string {
-  return filter.id + ':::';
-}
-
-function filterKey(filter: Filter, option: FilterOption): string {
-  return filterPrefix(filter) + option.id;
-}
-
-function toggleFilter(filter: Filter, option: FilterOption) {
-
-  const appliedFiltersInternal = cloneDeep(appliedFilters.value);
-
-  const prefix = filterPrefix(filter);
-  const key = filterKey(filter, option);
-
-  const alreadyActive = appliedFiltersInternal[key];
-
-  // remove all with the same prefix
-
-  Object.keys(appliedFiltersInternal).forEach((key) => {
-    if (key.startsWith(prefix)) {
-      delete appliedFiltersInternal[key];
-    }
-  });
-
-  if (!alreadyActive) {
-    appliedFiltersInternal[key] = option;
-  }
-
-  appliedFilters.value = appliedFiltersInternal;
-}
-
-// Apply default filters
-
-function applyDefaultFilters() {
-  props.filters.forEach((filter) => {
-    const defaultOption = filter.options.find(option => option.id === filter.default);
-
-    if (defaultOption) {
-      toggleFilter(filter, defaultOption);
-    }
-  });
-}
-
-applyDefaultFilters();
-
-// Filtered items
-
-const filteredItems = computed<Item[]>(() => {
-  const query = searchQuery.value.toLowerCase();
-
-  return props.options
-    .filter((option) => {
-      if (!query) {
-        return true;
-      }
-
-      const filterKeyInternal = props.filterKey ?? props.field;
-
-      if (!filterKeyInternal) {
-        return true;
-      }
-
-      if (Array.isArray(filterKeyInternal)) {
-        return filterKeyInternal.some(key => get(option, key, '').toLowerCase().includes(query));
-      }
-
-      return get(option, filterKeyInternal, '').toLowerCase().includes(query);
-    })
-    .filter((option) => {
-      return Object.values(appliedFilters.value).every(filter => filter.action(option));
-    })
-    .sort((a, b) => {
-      return get(a, props.field, '').localeCompare(get(b, props.field, ''));
-    });
-});
-
-</script>
+<template>
+  <div>
+    <!-- Filters -->
+    <div class="flex items-start flex-wrap gap-4 gap-y-2 mb-3">
+      <div>
+        <p class="text-sm text-slate-600">
+          {{ t('sui.search') }}
+        </p>
+        <!-- Search -->
+        <BaseInput
+          v-model="searchQuery"
+          type="text"
+          :required="false"
+          name="searchQuery"
+          size="sm"
+          :disabled="disabled"
+          :placeholder="t('sui.search')"
+        />
+      </div>
+
+      <div
+        v-for="filter in filters"
+        :key="filter.label"
+      >
+        <p class="text-sm text-slate-600">
+          {{ filter.label }}
+        </p>
+
+        <div class="flex gap-1">
+          <BaseButton
+            v-for="option in filter.options"
+            :key="option.label"
+            type="button"
+            :size-behavior="SizeBehavior.input"
+            size="sm"
+            :color="appliedFilters[filterKey(filter, option)] ? 'info' : ''"
+            :disabled="disabled"
+            @click="toggleFilter(filter, option)"
+          >
+            {{ option.label }}
+          </BaseButton>
+        </div>
+      </div>
+    </div>
+
+    <!-- Selectors -->
+    <div class="flex flex-wrap gap-x-4 gap-y-2 mb-4">
+      <div class="flex items-center text-sm">
+        ({{ modelValueInternal.length }} / {{ options.length }})
+      </div>
+
+      <!-- Select all -->
+      <button
+        type="button"
+        class="text-sm text-blue-500 leading-tight text-left"
+        :disabled="disabled"
+        @click="selectAll"
+      >
+        {{ t('sui.select_all') }}
+      </button>
+
+      <!-- Select custom -->
+      <template
+        v-if="selectors.length"
+      >
+        <button
+          v-for="selector in selectors"
+          :key="selector.label"
+          type="button"
+          class="text-sm text-blue-500 leading-tight text-left"
+          :disabled="disabled"
+          @click="applySelector(selector)"
+        >
+          {{ selector.label }}
+        </button>
+      </template>
+
+      <!-- Unselect all -->
+      <button
+        type="button"
+        class="text-sm text-blue-500 leading-tight text-left"
+        :disabled="disabled"
+        @click="unselectAll"
+      >
+        {{ t('sui.unselect_all') }}
+      </button>
+    </div>
+
+    <!-- items -->
+    <div
+      v-if="filteredItems.length"
+      class="flex flex-wrap"
+    >
+      <label
+        v-for="item in filteredItems"
+        :key="item[primaryKey]"
+        class="flex space-x-2 w-full mb-1 || sm:w-1/3 || xl:w-1/4"
+        :class="[
+          disabled ? 'opacity-50' : 'cursor-pointer',
+        ]"
+      >
+        <input
+          v-model="modelValueInternal"
+          :value="item[primaryKey]"
+          :name="name"
+          class="rounded"
+          type="checkbox"
+          :disabled="disabled"
+        >
+
+        <span class="text-sm">
+          {{ get(item, field) }}
+        </span>
+      </label>
+    </div>
+
+    <div
+      v-else
+      class="flex items-center justify-center flex-grow py-16"
+    >
+      <div class="flex flex-col items-center">
+        <BaseEmptyState class="w-32" />
+
+        <p class="mt-3 text-center text-sm text-slate-600">
+          {{ t('sui.nothing_found') }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { t } from '@/i18n';
+import { RawOption } from '@/types';
+import { cloneDeep, get, uniq } from 'lodash';
+import { ref, computed, Ref, PropType } from 'vue';
+import BaseButton from './BaseButton.vue';
+import BaseEmptyState from '@/svg/BaseEmptyState.vue';
+import BaseInput from './BaseInput.vue';
+import { SizeBehavior } from '@/utils/sizeBehaviors';
+
+const emit = defineEmits(["update:modelValue"]);
+
+type Item = Record<string, any>;
+
+type ItemValue = string | number;
+
+interface Selector {
+  label: string;
+  action: (item: Item) => boolean;
+}
+
+interface Filter {
+  label: string;
+  id: string;
+  default?: string;
+  options: FilterOption[]
+}
+
+interface FilterOption {
+  label: string;
+  id: string;
+  action: (item: Item) => boolean;
+}
+
+const props = defineProps({
+  /**
+   * Model value, you may use v-model.
+   */
+  modelValue: {
+    default: undefined,
+    type: [Array, null, undefined] as PropType<string[] | null | undefined>,
+  },
+  /**
+   * List of options to select from
+   */
+  options: {
+    required: true,
+    type: Array as PropType<RawOption[]>,
+  },
+  /**
+   * Field to use as primary key
+   */
+  primaryKey: {
+    default: 'id',
+    type: String,
+  },
+  /**
+   * Field to display 
+   */
+  field: {
+    required: true,
+    type: String,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: null,
+    type: String,
+  },
+  /**
+   * Key to filter by
+   */
+  filterKey: {
+    default: null,
+    type: [String, Array, null] as PropType<string | string[]>,
+  },
+  /**
+   * Custom filters
+   * [
+   *   {
+   *     id: 'filterId',
+   *     label: 'Filter label',
+   *     default: 'defaultOptionId',
+   *     options: [
+   *      { id: 'optionId', label: 'Option label', action: (item) => item.field === 'value' }
+   *    ]
+   *   }
+   * ]
+   */
+  filters: {
+    default: () => [],
+    type: Array as PropType<Filter[]>,
+  },
+  /** 
+   * Custom selectors
+   * 
+   * [
+   *  {
+   *   label: 'Selector label',
+   *   action: (item) => item.field === 'value'
+   *  }
+   * ]
+   */
+  selectors: {
+    default: () => [],
+    type: Array as PropType<Selector[]>,
+  },
+});
+
+
+const modelValueInternal: Ref<ItemValue[]> = ref([]);
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.modelValue) {
+      modelValueInternal.value = props.modelValue;
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => modelValueInternal.value,
+  () => {
+    if (modelValueInternal.value) {
+      emit('update:modelValue', modelValueInternal.value);
+    }
+  },
+  { immediate: true }
+);
+
+function selectAll() {
+  const currentlySelected = modelValueInternal.value;
+  const itemIds = filteredItems.value.map(item => get(item, props.primaryKey, ''));
+
+  modelValueInternal.value = uniq([...currentlySelected, ...itemIds]);
+}
+
+function unselectAll() {
+  const currentlySelected = modelValueInternal.value;
+  const toRemoveIds = filteredItems.value.map(option => get(option, props.primaryKey, ''));
+  modelValueInternal.value = currentlySelected.filter(id => !toRemoveIds.includes(id));
+}
+
+function applySelector(selector: Selector) {
+  modelValueInternal.value = props.options.filter(option => selector.action(option)).map(option => get(option, props.primaryKey, ''));
+}
+
+// Filters
+
+const searchQuery: Ref<string> = ref('');
+
+const appliedFilters = ref<Record<string, FilterOption>>({});
+
+function filterPrefix(filter: Filter): string {
+  return filter.id + ':::';
+}
+
+function filterKey(filter: Filter, option: FilterOption): string {
+  return filterPrefix(filter) + option.id;
+}
+
+function toggleFilter(filter: Filter, option: FilterOption) {
+
+  const appliedFiltersInternal = cloneDeep(appliedFilters.value);
+
+  const prefix = filterPrefix(filter);
+  const key = filterKey(filter, option);
+
+  const alreadyActive = appliedFiltersInternal[key];
+
+  // remove all with the same prefix
+
+  Object.keys(appliedFiltersInternal).forEach((key) => {
+    if (key.startsWith(prefix)) {
+      delete appliedFiltersInternal[key];
+    }
+  });
+
+  if (!alreadyActive) {
+    appliedFiltersInternal[key] = option;
+  }
+
+  appliedFilters.value = appliedFiltersInternal;
+}
+
+// Apply default filters
+
+function applyDefaultFilters() {
+  props.filters.forEach((filter) => {
+    const defaultOption = filter.options.find(option => option.id === filter.default);
+
+    if (defaultOption) {
+      toggleFilter(filter, defaultOption);
+    }
+  });
+}
+
+applyDefaultFilters();
+
+// Filtered items
+
+const filteredItems = computed<Item[]>(() => {
+  const query = searchQuery.value.toLowerCase();
+
+  return props.options
+    .filter((option) => {
+      if (!query) {
+        return true;
+      }
+
+      const filterKeyInternal = props.filterKey ?? props.field;
+
+      if (!filterKeyInternal) {
+        return true;
+      }
+
+      if (Array.isArray(filterKeyInternal)) {
+        return filterKeyInternal.some(key => get(option, key, '').toLowerCase().includes(query));
+      }
+
+      return get(option, filterKeyInternal, '').toLowerCase().includes(query);
+    })
+    .filter((option) => {
+      return Object.values(appliedFilters.value).every(filter => filter.action(option));
+    })
+    .sort((a, b) => {
+      return get(a, props.field, '').localeCompare(get(b, props.field, ''));
+    });
+});
+
+</script>