quasar-ui-danx 0.0.10 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",
@@ -62,6 +62,12 @@
     "last 4 iOS versions"
   ],
   "dependencies": {
-    "@vueuse/core": "^10.7.2"
+    "@heroicons/vue": "v1",
+    "@tinymce/tinymce-vue": "^5.1.1",
+    "@vueuse/core": "^10.7.2",
+    "exifreader": "^4.21.1",
+    "gsap": "^3.12.5",
+    "luxon": "^3.4.4",
+    "tailwindcss": "^3.4.1"
   }
 }

package/src/components/ActionTable/ActionTable.vue

@@ -0,0 +1,143 @@
+<template>
+  <q-table
+      ref="actionTable"
+      :selected="selectedRows"
+      :pagination="quasarPagination"
+      :columns="columns"
+      :loading="isLoadingList"
+      :rows="pagedItems?.data || []"
+      selection="multiple"
+      :rows-per-page-options="rowsPerPageOptions"
+      class="sticky-column sticky-header w-full !border-0"
+      color="blue-base"
+      @update:selected="$emit('update:selected-rows', $event)"
+      @update:pagination="() => {}"
+      @request="$emit('update:quasar-pagination', $event.pagination)"
+  >
+    <template #no-data>
+      <slot name="empty">
+        <EmptyTableState :text="`There are no ${label.toLowerCase()} matching the applied filter`" />
+      </slot>
+    </template>
+    <template #top-row>
+      <TableSummaryRow
+          :label="label"
+          :item-count="summary?.count || 0"
+          :selected-count="selectedRows.length"
+          :loading="isLoadingSummary"
+          :summary="summary"
+          :columns="columns"
+          @clear="$emit('update:selected-rows',  [])"
+      />
+    </template>
+    <template #header-cell="rowProps">
+      <q-th
+          :key="rowProps.key"
+          :props="rowProps"
+          :data-drop-zone="`resize-column-` + rowProps.col.name"
+      >
+        {{ rowProps.col.label }}
+        <HandleDraggable
+            v-if="rowProps.col.resizeable"
+            :drop-zone="`resize-column-` + rowProps.col.name"
+            class="resize-handle"
+            @resize="rowProps.col.onResize"
+        >
+          <RowResizeIcon class="w-4 text-neutral-base" />
+        </HandleDraggable>
+      </q-th>
+    </template>
+    <template #body-cell="rowProps">
+      <q-td :key="rowProps.key" :props="rowProps">
+        <template v-if="rowProps.col.component">
+          <RenderComponentColumn
+              :row-props="rowProps"
+              @action="$emit('action', $event)"
+          />
+        </template>
+        <template v-else-if="rowProps.col.fieldList">
+          <div v-for="field in rowProps.col.fieldList" :key="field">
+            {{ rowProps.row[field] }}
+          </div>
+        </template>
+        <template v-else-if="rowProps.col.filterOnClick">
+          <a @click="$emit('filter', rowProps.col.filterOnClick(rowProps.row))">
+            {{ rowProps.value }}
+          </a>
+        </template>
+        <template v-else>
+          <slot v-bind="{name: rowProps.col.name, row: rowProps.row, value: rowProps.value}">
+            {{ rowProps.value }}
+          </slot>
+        </template>
+      </q-td>
+    </template>
+  </q-table>
+</template>
+
+<script setup>
+import {
+  EmptyTableState,
+  HandleDraggable,
+  registerStickyScrolling,
+  RenderComponentColumn,
+  TableSummaryRow
+} from '@ui/components';
+import { DragHandleIcon as RowResizeIcon } from '@ui/svg';
+import { ref } from 'vue';
+
+defineEmits(['action', 'filter', 'update:quasar-pagination', 'update:selected-rows']);
+defineProps({
+  label: {
+    type: String,
+    required: true
+  },
+  selectedRows: {
+    type: Array,
+    required: true
+  },
+  quasarPagination: {
+    type: Object,
+    required: true
+  },
+  isLoadingList: Boolean,
+  pagedItems: {
+    type: Object,
+    default: null
+  },
+  isLoadingSummary: Boolean,
+  summary: {
+    type: Object,
+    default: null
+  },
+  columns: {
+    type: Array,
+    required: true
+  },
+  rowsPerPageOptions: {
+    type: Array,
+    default: () => [10, 25, 50, 100]
+  }
+});
+const actionTable = ref(null);
+registerStickyScrolling(actionTable);
+</script>
+
+<style lang="scss" scoped>
+[data-drop-zone] {
+  .resize-handle {
+    position: absolute;
+    top: 0;
+    right: -.45em;
+    width: .9em;
+    opacity: 0;
+    transition: all .3s;
+  }
+
+  &:hover {
+    .resize-handle {
+      opacity: 1;
+    }
+  }
+}
+</style>

package/src/components/ActionTable/BatchActionMenu.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <PopoverMenu
+        class="bg-neutral-plus-6 px-4 h-full flex"
+        :items="items"
+        :disabled="selectedRows.length === 0"
+        @action="onAction"
+    />
+    <q-tooltip v-if="selectedRows.length === 0">
+      Batch actions require a selection
+      </q-tooltip>
+      <slot>
+        <Component
+            :is="activeComponent.is"
+            v-if="activeComponent"
+            v-bind="activeComponent.props"
+            :is-saving="isSaving"
+            @close="activeAction = false"
+            @confirm="onConfirmAction"
+        />
+      </slot>
+  </div>
+</template>
+<script setup>
+import PopoverMenu from '@ui/components/Utility/Popover/PopoverMenu';
+import { computed, ref } from 'vue';
+
+const emit = defineEmits(['action']);
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  selectedRows: {
+    type: Array,
+    required: true
+  },
+  applyBatchAction: {
+    type: Function,
+    required: true
+  },
+  isSaving: Boolean
+});
+
+
+const activeAction = ref(null);
+const activeComponent = computed(() => (props.items.find(i => i.action === activeAction.value)?.component || (() => null))(props.selectedRows));
+
+function onAction(action) {
+  activeAction.value = action;
+  emit('action', action);
+}
+async function onConfirmAction(input) {
+  const result = await props.applyBatchAction(input || activeComponent.value.input());
+
+  if (result?.success) {
+    activeAction.value = null;
+  }
+}
+</script>

package/src/components/ActionTable/EmptyTableState.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="flex items-center justify-center text-sm py-14 w-full">
+    <div v-if="loading">
+      <slot name="loading">{{ loadingText }}
+        <q-spinner-ball class="w-4 ml-2" />
+      </slot>
+    </div>
+    <div v-if="saving">
+      <slot name="saving">{{ savingText }}
+        <q-spinner-ball class="w-4 ml-2" />
+      </slot>
+    </div>
+    <slot>{{ text }}</slot>
+  </div>
+</template>
+<script setup>
+defineProps({
+  loading: Boolean,
+  saving: Boolean,
+  text: {
+    type: String,
+    default: 'No records found'
+  },
+  loadingText: {
+    type: String,
+    default: 'Loading...'
+  },
+  savingText: {
+    type: String,
+    default: 'Saving...'
+  }
+});
+</script>

package/src/components/ActionTable/Filters/CollapsableFiltersSidebar.vue

@@ -0,0 +1,36 @@
+<template>
+  <CollapsableSidebar
+      :collapse="!showFilters"
+      disabled
+      min-width="0"
+      max-width="18rem"
+      name="admin-ads"
+      @update:collapse="$emit('update:show-filters', !$event)"
+  >
+    <FilterGroupList
+        :filter="filter"
+        :filter-groups="filterGroups"
+        @update:filter="$emit('update:filter', $event)"
+    />
+  </CollapsableSidebar>
+</template>
+<script setup>
+import { CollapsableSidebar, FilterGroupList } from '@ui/components';
+
+defineEmits(['update:filter', 'update:show-filters']);
+defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  showFilters: Boolean,
+  filter: {
+    type: Object,
+    default: null
+  },
+  filterGroups: {
+    type: Array,
+    default: () => []
+  }
+});
+</script>

package/src/components/ActionTable/Filters/FilterGroupItem.vue

@@ -0,0 +1,28 @@
+<template>
+  <q-expansion-item>
+    <template #header>
+      <div class="flex items-center flex-nowrap flex-grow">
+        <div class="whitespace-nowrap flex-grow text-left text-sm font-bold">{{ name }}</div>
+        <q-badge
+            :label="count"
+            rounded
+            class="ml-2 transition-all"
+            :class="{'bg-gray-base': !count, 'bg-blue-base': count}"
+        />
+      </div>
+    </template>
+    <slot />
+  </q-expansion-item>
+</template>
+<script setup>
+defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  count: {
+    type: Number,
+    required: true
+  }
+});
+</script>

package/src/components/ActionTable/Filters/FilterGroupList.vue

@@ -0,0 +1,76 @@
+<template>
+  <q-list>
+    <div class="px-4 py-2 max-w-full">
+      <template
+          v-for="(group, index) in filterGroups"
+          :key="'group-' + group.name"
+      >
+        <template v-if="group.flat">
+          <FilterableField
+              v-for="field in group.fields"
+              :key="'field-' + field.name"
+              :model-value="field.calcValue ? field.calcValue(filter) : filter[field.name]"
+              :field="field"
+              :loading="loading"
+              class="mb-4"
+              @update:model-value="updateFilter(field, $event)"
+          />
+        </template>
+
+        <FilterGroupItem
+            v-else
+            :name="group.name"
+            :count="activeCountByGroup[group.name]"
+        >
+          <FilterableField
+              v-for="field in group.fields"
+              :key="'field-' + field.name"
+              :model-value="field.calcValue ? field.calcValue(filter) : filter[field.name]"
+              :field="field"
+              :loading="loading"
+              class="mb-4"
+              @update:model-value="updateFilter(field, $event)"
+          />
+        </FilterGroupItem>
+
+        <q-separator
+            v-if="index < (filterGroups.length - 1)"
+            class="my-2"
+        />
+      </template>
+    </div>
+    </q-list>
+</template>
+<script setup>
+import { computed } from 'vue';
+import FilterableField from './FilterableField';
+import FilterGroupItem from './FilterGroupItem';
+
+const emit = defineEmits(['update:filter']);
+const props = defineProps({
+  filterGroups: {
+    type: Array,
+    required: true
+  },
+  filter: {
+    type: Object,
+    required: true
+  },
+  loading: Boolean
+});
+
+const activeCountByGroup = computed(() => {
+  const activeCountByGroup = {};
+  for (const group of props.filterGroups) {
+    activeCountByGroup[group.name] = group.fields.filter(field => props.filter[field.name] !== undefined).length;
+  }
+  return activeCountByGroup;
+});
+function updateFilter(field, value) {
+  let fieldFilter = { [field.name]: value };
+  if (field.filterBy) {
+    fieldFilter = field.filterBy(value);
+  }
+  emit('update:filter', { ...props.filter, ...fieldFilter });
+}
+</script>

package/src/components/ActionTable/Filters/FilterListToggle.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex items-center" :class="{'w-72': showFilters}">
+    <div class="flex-grow">
+      <q-btn
+          class="btn-blue-highlight"
+          :class="{'highlighted': showFilters}"
+          @click="$emit('update:show-filters', !showFilters)"
+      >
+        <FilterIcon class="w-5 mr-2" />
+        <q-badge
+            :label="'' + activeCount"
+            rounded
+            :color="activeCount > 0 ? 'blue-base' : 'gray-base'"
+        />
+        </q-btn>
+    </div>
+    <a
+        v-if="activeCount > 0"
+        class="text-blue-base hover:text-blue-plus-1 text-sm ml-4"
+        @click="$emit('update:filter', {})"
+    >Clear All</a>
+  </div>
+</template>
+<script setup>
+import { FilterIcon } from '@ui/svg';
+import { computed } from 'vue';
+
+defineEmits(['update:show-filters', 'update:filter']);
+const props = defineProps({
+  filter: {
+    type: Object,
+    required: true
+  },
+  filterGroups: {
+    type: Array,
+    required: true
+  },
+  showFilters: Boolean
+});
+
+const filterNameDictionary = computed(() => {
+  return props.filterGroups.reduce((acc, fg) => {
+    fg.fields.forEach(f => {
+      acc[f.name] = true;
+    });
+    return acc;
+  }, {});
+});
+const activeCount = computed(() => Object.keys(props.filter).filter(key => props.filter[key] !== undefined && filterNameDictionary.value[key]).length);
+</script>

package/src/components/ActionTable/Filters/FilterableField.vue

@@ -0,0 +1,143 @@
+<template>
+  <div>
+    <template v-if="field.type === 'multi-select'">
+      <SelectField
+          v-if="field.options?.length > 0 || loading"
+          :model-value="modelValue"
+          :options="field.options"
+          multiple
+          :loading="loading"
+          :chip-limit="1"
+          filterable
+          :placeholder="field.placeholder"
+          :label="field.label"
+          @update:model-value="onUpdate"
+      />
+      <div
+          v-else
+          class="mt-2"
+      >
+        <div class="text-xs font-bold">{{ field.label }}</div>
+        <div class="text-sm ml-3 py-2">No Available Options</div>
+      </div>
+    </template>
+
+    <SelectField
+        v-else-if="field.type === 'single-select'"
+        :model-value="modelValue"
+        :options="field.options"
+        :placeholder="field.placeholder"
+        :loading="loading"
+        :label="field.label"
+        @update:model-value="onUpdate"
+    />
+    <DateField
+        v-else-if="field.type === 'date'"
+        :model-value="modelValue"
+        :label="field.label"
+        class="mt-2"
+        @update:model-value="onUpdate"
+    />
+    <DateRangeField
+        v-else-if="field.type === 'date-range'"
+        :model-value="modelValue"
+        :label="field.label"
+        :inline="field.inline"
+        with-time
+        class="mt-2 reactive"
+        @update:model-value="onUpdate"
+    />
+    <NumberRangeField
+        v-else-if="field.type === 'number-range'"
+        :model-value="modelValue"
+        :label="field.label"
+        class="mt-2"
+        :debounce="1000"
+        @update:model-value="onUpdate"
+    />
+    <NumberRangeField
+        v-else-if="field.type === 'currency-range'"
+        :model-value="modelValue"
+        :label="field.label"
+        class="mt-2"
+        :debounce="1000"
+        currency
+        @update:model-value="onUpdate"
+    />
+    <NumberRangeField
+        v-else-if="field.type === 'percent-range'"
+        :model-value="modelValue"
+        :label="field.label"
+        class="mt-2"
+        :debounce="1000"
+        percent
+        @update:model-value="onUpdate"
+    />
+    <BooleanField
+        v-else-if="field.type === 'boolean'"
+        :field="field"
+        :model-value="modelValue"
+        class="mt-2"
+        label-class="text-xs font-bold"
+        @update:model-value="onUpdate"
+    />
+    <MultiKeywordField
+        v-else-if="field.type === 'multi-keywords'"
+        :model-value="modelValue"
+        :field="field"
+        @update:model-value="onUpdate"
+    />
+    <SelectWithChildrenField
+        v-else-if="field.type === 'select-with-children'"
+        :model-value="modelValue"
+        :options="field.options"
+        :loading="loading"
+        :label="field.label"
+        :placeholder="field.placeholder"
+        @update:model-value="onUpdate"
+    />
+    <template v-else>
+      Field &quot;{{ field.name }}&quot;: Unknown filter type {{ field.type }}
+    </template>
+  </div>
+</template>
+<script setup>
+import {
+  BooleanField,
+  DateField,
+  DateRangeField,
+  MultiKeywordField,
+  NumberRangeField,
+  SelectField,
+  SelectWithChildrenField
+} from '@ui/components';
+
+const emit = defineEmits(['update:model-value']);
+const props = defineProps({
+  field: {
+    type: Object,
+    required: true
+  },
+  modelValue: {
+    type: [String, Array, Number, Object, Boolean],
+    default: undefined
+  },
+  loading: Boolean
+});
+
+function onUpdate(val) {
+  let newVal = val || undefined;
+
+  switch (props.field.type) {
+    case 'multi-select':
+      newVal = val.length > 0 ? val : undefined;
+      break;
+    case 'single-select':
+    case 'boolean':
+      newVal = val === null ? undefined : val;
+      break;
+  }
+
+  emit('update:model-value', newVal);
+}
+</script>

package/src/components/ActionTable/Filters/index.ts

@@ -0,0 +1,5 @@
+export {
+    default as CollapsableFiltersSidebar
+} from "./CollapsableFiltersSidebar.vue";
+export { default as FilterGroupList } from "./FilterGroupList.vue";
+export { default as FilterListToggle } from "./FilterListToggle.vue";

package/src/components/ActionTable/Form/Fields/BooleanField.vue

@@ -0,0 +1,37 @@
+<template>
+  <q-toggle
+      :data-testid="'boolean-field-' + field.id"
+      :model-value="modelValue"
+      :toggle-indeterminate="toggleIndeterminate"
+      :indeterminate-value="undefined"
+      @update:model-value="$emit('update:model-value', $event)"
+  >
+    <FieldLabel
+        :field="field"
+        :show-name="showName"
+        :class="labelClass"
+    />
+    </q-toggle>
+</template>
+
+<script setup>
+import FieldLabel from './FieldLabel';
+
+defineEmits(['update:model-value']);
+defineProps({
+  modelValue: {
+    type: [Boolean],
+    default: undefined
+  },
+  field: {
+    type: Object,
+    required: true
+  },
+  labelClass: {
+    type: String,
+    default: 'text-sm'
+  },
+  showName: Boolean,
+  toggleIndeterminate: Boolean
+});
+</script>

package/src/components/ActionTable/Form/Fields/ConfirmPasswordField.vue

@@ -0,0 +1,46 @@
+<template>
+  <LabeledInput
+      type="password"
+      v-bind="props"
+      :rules="rules"
+      @update:model-value="$emit('update:model-value', $event)"
+  />
+</template>
+
+<script setup>
+import LabeledInput from './LabeledInput';
+
+defineEmits(['update:model-value']);
+const props = defineProps({
+  name: {
+    type: String,
+    default: 'password_confirmation'
+  },
+  label: {
+    type: String,
+    default: 'Confirm Password'
+  },
+  placeholder: {
+    type: String,
+    default: 'Confirm Password'
+  },
+  modelValue: {
+    type: [String, Number],
+    required: true
+  },
+  error: {
+    type: String,
+    default: null
+  },
+  password: {
+    type: String,
+    default: ''
+  },
+  disabled: Boolean
+});
+
+const rules = [
+  (val) =>
+      val === props.password || 'The password and confirmation do not match'
+];
+</script>