new release (#151)

added several dam exports
custom data form

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.38.0](https://github.com/anzusystems/common-admin/compare/1.37.0...1.38.0) (2023-11-10)
+
+### Features
+* **chore:** updated dependencies
+* **ACustomDataForm:** new component to manage `CustomDataAware` entities
+* added several type exports for DAM
+
+### BREAKING CHANGES
+* **dependencies:** new required versions:
+  * `[email protected]`
+  * `@vueuse/[email protected]`
+  * `@vueuse/[email protected]`
+  * `[email protected]`
+
 ## [1.37.0](https://github.com/anzusystems/common-admin/compare/1.36.0...1.37.0) (2023-11-07)
 
 ### Bug Fixes

package.json

@@ -13,7 +13,7 @@
     "./styles": "./dist/style.css",
     "./*": "./*"
   },
-  "version": "1.37.0",
+  "version": "1.38.0",
   "type": "module",
   "license": "Apache-2.0",
   "scripts": {
@@ -44,17 +44,17 @@
     "@types/sortablejs": "^1.15.5",
     "@types/webfontloader": "^1.6.37",
     "@typescript-eslint/parser": "^6.10.0",
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue": "^4.4.1",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/language-server": "^1.8.22",
     "@vue/language-service": "^1.8.22",
     "@vue/tsconfig": "0.1.3",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^10.5.0",
-    "@vueuse/integrations": "^10.5.0",
-    "axios": "1.6.0",
+    "@vueuse/core": "^10.6.0",
+    "@vueuse/integrations": "^10.6.0",
+    "axios": "1.6.1",
     "dayjs": "1.11.10",
     "eslint": "8.52.0",
     "eslint-plugin-vue": "9.18.1",
@@ -63,7 +63,7 @@
     "pinia": "2.1.7",
     "postcss-html": "^1.5.0",
     "postcss-prefix-selector": "^1.16.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
     "sass": "^1.69.5",
     "shortcut-buttons-flatpickr": "^0.4.0",
     "sortablejs": "^1.15.0",
@@ -81,22 +81,22 @@
     "vue-i18n": "9.6.5",
     "vue-router": "4.2.5",
     "vue-tsc": "1.8.22",
-    "vuetify": "3.3.23",
+    "vuetify": "3.4.0",
     "webfontloader": "^1.6.28"
   },
   "peerDependencies": {
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/core": "10.5.0",
-    "@vueuse/integrations": "10.5.0",
-    "axios": "1.6.0",
+    "@vueuse/core": "10.6.0",
+    "@vueuse/integrations": "10.6.0",
+    "axios": "1.6.1",
     "dayjs": "1.11.10",
     "flatpickr": "4.6.13",
     "pinia": "2.1.7",
     "vue": "3.3.8",
     "vue-i18n": "9.6.5",
     "vue-router": "4.2.5",
-    "vuetify": "3.3.23"
+    "vuetify": "3.4.0"
   },
   "peerDependenciesMeta": {
     "@vueuse/core": {

src/components/customDataForm/ACustomDataForm.vue

@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import useVuelidate from '@vuelidate/core'
+import type { CustomDataFormElement } from '@/components/customDataForm/CustomDataForm'
+import type { ValidationScope } from '@/types/Validation'
+import { useCustomDataForm } from '@/components/customDataForm/useCustomDataForm'
+import ACustomFormElement from '@/components/customDataForm/ACustomDataFormElement.vue'
+import ARow from '@/components/ARow.vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: { [key: string]: any }
+    elements: CustomDataFormElement[]
+    validationScope?: ValidationScope
+    pinnedCount?: number
+    readonly?: boolean
+  }>(),
+  {
+    validationScope: undefined,
+    pinnedCount: 1000,
+    readonly: false,
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', data: any): void
+  (e: 'anyChange'): void
+}>()
+
+const { t } = useI18n()
+
+const { showAll, toggleForm } = useCustomDataForm()
+
+const updateModelValue = (data: { property: string; value: any }) => {
+  const updated = {} as { [key: string]: any }
+  updated[data.property] = data.value
+  emit('update:modelValue', { ...props.modelValue, ...updated })
+  emit('anyChange')
+}
+
+const elementsPinned = computed(() => {
+  return props.elements.slice(0, props.pinnedCount)
+})
+
+const elementsOther = computed(() => {
+  return props.elements.slice(props.pinnedCount)
+})
+
+const showHideButtonText = computed(() => {
+  return showAll.value ? t('coreDam.asset.detail.metadataToggle.show') : t('coreDam.asset.detail.metadataToggle.hide')
+})
+const showHideButtonIcon = computed(() => {
+  return showAll.value ? 'mdi-minus' : 'mdi-plus'
+})
+
+const enableShowHide = computed(() => {
+  return props.elements.length > props.pinnedCount
+})
+
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+const v$ = useVuelidate({ $scope: props.validationScope })
+
+const validate = (): Promise<boolean> => {
+  return v$.value.$validate()
+}
+
+defineExpose({
+  validate,
+})
+</script>
+
+<template>
+  <div class="w-100">
+    <slot name="before-pinned" />
+    <VRow
+      v-for="element in elementsPinned"
+      :key="element.id"
+      dense
+      class="mt-1"
+    >
+      <VCol>
+        <ARow
+          v-if="readonly"
+          :title="element.name"
+        >
+          {{ modelValue[element.property] }}
+        </ARow>
+        <ACustomFormElement
+          v-else
+          :config="element"
+          :model-value="modelValue[element.property]"
+          :validation-scope="validationScope"
+          @update:model-value="updateModelValue"
+        />
+      </VCol>
+    </VRow>
+    <slot name="after-pinned" />
+  </div>
+  <div
+    v-show="showAll"
+    class="w-100"
+  >
+    <VRow
+      v-for="element in elementsOther"
+      :key="element.id"
+      dense
+      class="mt-1"
+    >
+      <VCol>
+        <ARow
+          v-if="readonly"
+          :title="element.name"
+        >
+          {{ modelValue[element.property] }}
+        </ARow>
+        <ACustomFormElement
+          v-else
+          :config="element"
+          :model-value="modelValue[element.property]"
+          @update:model-value="updateModelValue"
+        />
+      </VCol>
+    </VRow>
+  </div>
+  <VBtn
+    v-if="enableShowHide"
+    variant="text"
+    size="small"
+    class="my-2"
+    @click="toggleForm"
+  >
+    <VIcon :icon="showHideButtonIcon" />
+    {{ showHideButtonText }}
+  </VBtn>
+</template>

src/components/customDataForm/ACustomDataFormElement.vue

@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+import { computed, isProxy, ref, toRaw } from 'vue'
+import type { ErrorObject } from '@vuelidate/core'
+import { useVuelidate } from '@vuelidate/core'
+import type { CustomDataFormElement } from '@/components/customDataForm/CustomDataForm'
+import type { ValidationScope } from '@/types/Validation'
+import { CustomDataFormElementType } from '@/components/customDataForm/CustomDataFormElementTypes'
+import { isEmptyObject } from '@/utils/common'
+import { useValidate } from '@/validators/vuelidate/useValidate'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: any
+    config: CustomDataFormElement
+    validationScope?: ValidationScope
+  }>(),
+  {
+    validationScope: undefined,
+  }
+)
+const emit = defineEmits<{
+  (e: 'update:modelValue', data: { property: string; value: any }): void
+  (e: 'blur', data: any): void
+}>()
+
+const fixValue = (value: any) => {
+  if (props.config.attributes.type === CustomDataFormElementType.Integer) {
+    return parseInt(value)
+  }
+  return value
+}
+
+const updateModelValue = (value: any) => {
+  emit('update:modelValue', { property: props.config.property, value: fixValue(value) })
+}
+
+const modelValueComputed = computed(() => {
+  const value = isProxy(props.modelValue) ? toRaw(props.modelValue) : props.modelValue
+  if (props.config.attributes.type === CustomDataFormElementType.StringArray && isEmptyObject(value)) return []
+  return value
+})
+
+const { maxLength, minLength, requiredIf, minValue, maxValue, stringArrayItemLength } = useValidate()
+
+const rules = computed(() => {
+  const dynamicRules: Record<string, any> = {
+    modelValueComputed: {
+      required: requiredIf(props.config.attributes.required),
+    },
+  }
+  switch (props.config.attributes.type) {
+    case CustomDataFormElementType.String:
+      dynamicRules.modelValueComputed.minLength = minLength(
+        props.config.attributes.minValue ? props.config.attributes.minValue : 0
+      )
+      dynamicRules.modelValueComputed.maxLength = maxLength(
+        props.config.attributes.maxValue ? props.config.attributes.maxValue : 256
+      )
+      break
+    case CustomDataFormElementType.Integer:
+      dynamicRules.modelValueComputed.minValue = minValue(
+        props.config.attributes.minValue ? props.config.attributes.minValue : 0
+      )
+      dynamicRules.modelValueComputed.maxValue = maxValue(
+        props.config.attributes.maxValue ? props.config.attributes.maxValue : 9999
+      )
+      break
+    case CustomDataFormElementType.StringArray:
+      dynamicRules.modelValueComputed.minLength = minLength(
+        props.config.attributes.minCount ? props.config.attributes.minCount : 0
+      )
+      dynamicRules.modelValueComputed.maxLength = maxLength(
+        props.config.attributes.maxCount ? props.config.attributes.maxCount : 32
+      )
+      dynamicRules.modelValueComputed.stringArrayItemLength = stringArrayItemLength(
+        props.config.attributes.minValue ? props.config.attributes.minValue : 0,
+        props.config.attributes.maxValue ? props.config.attributes.maxValue : 256
+      )
+      break
+  }
+
+  return dynamicRules
+})
+
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+const v$ = useVuelidate(rules, { modelValueComputed }, { $scope: props.validationScope })
+
+const errorMessageComputed = computed(() => {
+  if (v$.value.$errors.length) return [v$.value.$errors.map((item: ErrorObject) => item.$message).join(' ')]
+  return []
+})
+
+const counter = ref<number | undefined>(undefined)
+counter.value = props.config.attributes.maxValue ?? undefined
+
+const onBlur = () => {
+  emit('blur', props.modelValue)
+  v$.value.$touch()
+}
+</script>
+
+<template>
+  <VTextarea
+    v-if="config.attributes.type === CustomDataFormElementType.String"
+    :model-value="modelValue"
+    auto-grow
+    :rows="1"
+    :label="config.name"
+    :error-messages="errorMessageComputed"
+    :counter="counter"
+    :data-cy="'custom-field-' + config.property"
+    @update:model-value="updateModelValue"
+    @blur="onBlur"
+  >
+    <template #label>
+      {{ config.name
+      }}<span
+        v-if="config.attributes.required"
+        class="required"
+      />
+    </template>
+  </VTextarea>
+  <VTextField
+    v-else-if="config.attributes.type === CustomDataFormElementType.Integer"
+    :model-value="modelValueComputed"
+    type="number"
+    :label="config.name"
+    :error-messages="errorMessageComputed"
+    :data-cy="'custom-field-' + config.property"
+    @update:model-value="updateModelValue"
+    @blur="onBlur"
+  >
+    <template #label>
+      {{ config.name
+      }}<span
+        v-if="config.attributes.required"
+        class="required"
+      />
+    </template>
+  </VTextField>
+  <VCombobox
+    v-else-if="config.attributes.type === CustomDataFormElementType.StringArray"
+    :model-value="modelValueComputed"
+    :label="config.name"
+    multiple
+    chips
+    :error-messages="errorMessageComputed"
+    :data-cy="'custom-field-' + config.property"
+    @update:model-value="updateModelValue"
+    @blur="onBlur"
+  >
+    <template #label>
+      {{ config.name
+      }}<span
+        v-if="config.attributes.required"
+        class="required"
+      />
+    </template>
+  </VCombobox>
+  <VSwitch
+    v-if="config.attributes.type === CustomDataFormElementType.Boolean && config.attributes.required === true"
+    :label="config.name"
+    :model-value="modelValueComputed"
+    :data-cy="'custom-field-' + config.property"
+    @update:model-value="updateModelValue"
+  />
+  <div v-if="config.attributes.type === CustomDataFormElementType.Boolean && config.attributes.required === false">
+    optional boolean todo
+  </div>
+</template>