@drax/crud-vue 0.40.0 → 0.43.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.40.0",
+  "version": "0.43.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,10 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^0.40.0",
-    "@drax/crud-front": "^0.40.0",
-    "@drax/crud-share": "^0.40.0",
-    "@drax/media-vue": "^0.40.0"
+    "@drax/common-front": "^0.43.0",
+    "@drax/crud-front": "^0.43.0",
+    "@drax/crud-share": "^0.43.0",
+    "@drax/media-vue": "^0.43.0"
   },
   "peerDependencies": {
     "pinia": "^2.2.2",
@@ -64,5 +64,5 @@
     "vue-tsc": "^2.1.10",
     "vuetify": "^3.8.2"
   },
-  "gitHead": "269ec7921d83364dfba091cd74bd3f45a8135c26"
+  "gitHead": "3451a1c66eaf3facd4fef67d96750bf5d38a1d5c"
 }

package/src/components/CrudAutocomplete.vue

@@ -123,7 +123,28 @@ defineEmits(['updateValue'])
       :append-icon="appendIcon"
       :prepend-inner-icon="prependInnerIcon"
       :append-inner-icon="appendInnerIcon"
-  ></v-select>
+  >
+    <template v-slot:item="{ props: itemProps, item }">
+      <v-list-item
+          v-bind="itemProps"
+          density="compact"
+          :title="item.raw[itemTitle]"
+          :color="item.raw?.color"
+          :base-color="item.raw?.color"
+          :prepend-icon="item.raw?.icon"
+      />
+    </template>
+
+    <template v-slot:selection="{item}">
+      <v-chip tile density="compact"
+              :color="item.raw?.color"
+              :prepend-icon="item.raw?.icon"
+      >
+        {{ item.raw[itemTitle] }}
+      </v-chip>
+    </template>
+
+  </v-select>
 
 
   <v-autocomplete
@@ -154,7 +175,28 @@ defineEmits(['updateValue'])
       :append-icon="appendIcon"
       :prepend-inner-icon="prependInnerIcon"
       :append-inner-icon="appendInnerIcon"
-  ></v-autocomplete>
+  >
+    <template v-slot:item="{ props: itemProps, item }">
+      <v-list-item
+          v-bind="itemProps"
+          density="compact"
+          :title="item.raw[itemTitle]"
+          :color="item.raw?.color"
+          :base-color="item.raw?.color"
+          :prepend-icon="item.raw?.icon"
+      />
+    </template>
+
+    <template v-slot:selection="{item}">
+      <v-chip tile density="compact"
+              :color="item.raw?.color"
+              :prepend-icon="item.raw?.icon"
+      >
+        {{ item.raw[itemTitle] }}
+      </v-chip>
+    </template>
+
+  </v-autocomplete>
 
 
 </template>

package/src/components/CrudFormField.vue

@@ -170,6 +170,47 @@ defineEmits(['updateValue'])
     >
     </v-combobox>
 
+    <v-select
+        v-if="field.type === 'select'"
+        :name="name"
+        :label="label"
+        :hint="field.hint"
+        :persistent-hint="field.persistentHint"
+        v-model="valueModel"
+        :items="field.items"
+        item-title="title"
+        item-value="value"
+        :readonly="readonly"
+        :error-messages="inputErrors"
+        :density="density"
+        :variant="variant"
+        :clearable="clearable"
+        :hide-details="hideDetails"
+        :single-line="singleLine"
+        :rules="rules"
+        @update:modelValue="$emit('updateValue')"
+        :prepend-icon="prependIcon"
+        :append-icon="appendIcon"
+        :prepend-inner-icon="prependInnerIcon"
+        :append-inner-icon="appendInnerIcon"
+
+    >
+      <template v-slot:item="{ props: itemProps, item }">
+        <v-list-item
+            v-bind="itemProps"
+            density="compact"
+            :title="item.raw.title"
+            :color="item.raw.color"
+            :base-color="item.raw.color"
+            :prepend-icon="item.raw.icon"
+        />
+      </template>
+
+      <template v-slot:selection="{item}">
+        <v-chip tile density="compact" :color="item.raw.color" :prepend-icon="item.raw.icon">{{ item.raw.title }}</v-chip>
+      </template>
+    </v-select>
+
 
     <v-select
         v-if="field.type === 'enum' && field.noFilter"

package/src/components/combobox/EntityCombobox.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import {useEntityStore} from '../../stores/UseEntityStore'
+import {useI18n} from 'vue-i18n'
+import type {IEntityCrud} from "@drax/crud-share"
+
+const valueModel = defineModel()
+const entityStore = useEntityStore()
+const {t,te} =  useI18n()
+
+const getEntityLabel = (entity: IEntityCrud) => {
+  const key = entity?.name?.toLowerCase() + '.entity'
+  return te(key) ? t(key) : entity?.name
+}
+
+</script>
+
+<template>
+
+  <v-select
+  :items="entityStore.entities"
+  item-value="name"
+  v-model="valueModel"
+  :label="t('crud.entity')"
+  v-bind="$attrs"
+
+  >
+
+    <template v-slot:item="{ props: itemProps, item }">
+      <v-list-item
+          v-bind="itemProps"
+          density="compact"
+          :title="getEntityLabel(item.raw as IEntityCrud)"
+
+      />
+    </template>
+
+    <template v-slot:selection="{item}">
+      {{ getEntityLabel(item.raw as IEntityCrud) }}
+    </template>
+  </v-select>
+
+</template>
+
+<style scoped>
+
+</style>

package/src/index.ts

@@ -8,7 +8,9 @@ import CrudFilters from "./components/CrudFilters.vue";
 import CrudNotify from "./components/CrudNotify.vue";
 import CrudSearch from "./components/CrudSearch.vue";
 import CrudAutocomplete from "./components/CrudAutocomplete.vue";
+import EntityCombobox from "./components/combobox/EntityCombobox.vue";
 import {useCrudStore} from "./stores/UseCrudStore";
+import {useEntityStore} from "./stores/UseEntityStore";
 import {useCrud} from "./composables/UseCrud";
 import {useFormUtils} from "./composables/UseFormUtils";
 import {useInputErrorI18n} from "./composables/UseInputErrorI18n";
@@ -30,6 +32,8 @@ export {
     useFormUtils,
     useCrudStore,
     useInputErrorI18n,
-    EntityCrud
+    EntityCrud,
+    useEntityStore,
+    EntityCombobox
 
 }

package/src/stores/UseEntityStore.ts

@@ -0,0 +1,31 @@
+import {defineStore} from "pinia";
+import type { IEntityCrud} from "@drax/crud-share";
+
+export const useEntityStore = defineStore('EntityStore', {
+    state: () => (
+        {
+            entities: [] as IEntityCrud[],
+
+        }
+    ),
+    getters: {
+        getEntities(state: any) {
+                return state.entities
+        },
+        hasEntity(state: any) {
+            return (name: string) => state.entities.some((entity: IEntityCrud) => entity.name === name)
+        },
+        getEntity(state: any) {
+            return (name: string) => state.entities.find((entity: IEntityCrud) => entity.name === name)
+        }
+    },
+    actions: {
+        setEntities(entities: IEntityCrud[]) {
+            this.entities = entities
+        },
+        addEntity(entity: IEntityCrud) {
+            this.entities.push(entity)
+        }
+    }
+
+})