quasar-ui-danx 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",
@@ -62,6 +62,7 @@
     "last 4 iOS versions"
   ],
   "dependencies": {
-    "@vueuse/core": "^10.7.2"
+    "@vueuse/core": "^10.7.2",
+    "tailwindcss": "^3.4.1"
   }
 }

package/src/components/ActionTable/ActionTable.vue

@@ -0,0 +1,135 @@
+<!--suppress VueUnrecognizedSlot -->
+<template>
+  <QTable
+    ref="actionTable"
+    :selected="selectedRows"
+    :pagination="quasarPagination"
+    :columns="columns"
+    :loading="isLoadingList"
+    :rows="pagedItems?.data || []"
+    selection="multiple"
+    :rows-per-page-options="[25,50,100]"
+    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">
+      <QTh
+        :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>
+      </QTh>
+    </template>
+    <template #body-cell="rowProps">
+      <QTd :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>
+      </QTd>
+    </template>
+  </QTable>
+</template>
+
+<script setup>
+import { DragHandleIcon as RowResizeIcon } from "@/svg";
+import { EmptyTableState, registerStickyScrolling, RenderComponentColumn, TableSummaryRow } from "danx/src/components";
+import { HandleDraggable } from "quasar-ui-danx/src";
+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
+  }
+});
+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"
+    />
+    <QTooltip v-if="selectedRows.length === 0">
+      Batch actions require a selection
+    </QTooltip>
+    <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 "components/Common/Menu/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 }}
+        <QSpinnerBall class="w-4 ml-2" />
+      </slot>
+    </div>
+    <div v-if="saving">
+      <slot name="saving">{{ savingText }}
+        <QSpinnerBall 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 "danx/src/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>
+  <QExpansionItem>
+    <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>
+        <QBadge
+          :label="count"
+          rounded
+          class="ml-2 transition-all"
+          :class="{'bg-gray-base': !count, 'bg-blue-base': count}"
+        />
+      </div>
+    </template>
+    <slot />
+  </QExpansionItem>
+</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>
+  <QList>
+    <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>
+
+        <QSeparator
+          v-if="index < (filterGroups.length - 1)"
+          class="my-2"
+        />
+      </template>
+    </div>
+  </QList>
+</template>
+<script setup>
+import FilterableField from "danx/src/components/ActionTable/Filters/FilterableField";
+import FilterGroupItem from "danx/src/components/ActionTable/Filters/FilterGroupItem";
+import { computed } from "vue";
+
+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">
+      <QBtn
+        class="btn-blue-highlight"
+        :class="{'highlighted': showFilters}"
+        @click="$emit('update:show-filters', !showFilters)"
+      >
+        <FilterIcon class="w-5 mr-2" />
+        <QBadge
+          :label="'' + activeCount"
+          rounded
+          :color="activeCount > 0 ? 'blue-base' : 'gray-base'"
+        />
+      </QBtn>
+    </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 "@/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,141 @@
+<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 from "danx/src/components/ActionTable/Form/Fields/BooleanField";
+import DateField from "danx/src/components/ActionTable/Form/Fields/DateField";
+import DateRangeField from "danx/src/components/ActionTable/Form/Fields/DateRangeField";
+import MultiKeywordField from "danx/src/components/ActionTable/Form/Fields/MultiKeywordField";
+import NumberRangeField from "danx/src/components/ActionTable/Form/Fields/NumberRangeField";
+import SelectField from "danx/src/components/ActionTable/Form/Fields/SelectField";
+import SelectWithChildrenField from "danx/src/components/ActionTable/Form/Fields/SelectWithChildrenField";
+
+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/Form/Fields/BooleanField.vue

@@ -0,0 +1,37 @@
+<template>
+  <QToggle
+    :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"
+    />
+  </QToggle>
+</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 "danx/src/components/ActionTable/Form/Fields/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>