@dative-gpi/foundation-core-components 1.0.194-playlists-02 → 1.0.194-sandbox

package/components/lists/dataCategories/FSBaseDataCategoriesList.vue

@@ -41,17 +41,18 @@
         <template
           #item.tile="{ index, item }"
         >
-          <FSClickable
+          <FSCard
             :key="index"
             padding="12px"
             height="60px"
             width="233px"
-            :color="isSelected(item.id) ? ColorEnum.Primary : ColorEnum.Dark"
+            :variant="isSelected(item.id) ? CardVariants.Standard : CardVariants.Background"
+            :color="ColorEnum.Primary"
             @click="$emit('update:modelValue', [item.id])"
             v-bind="$attrs"
           >
             <template
-              #default
+              #default="{ contentVariant }"
             >
               <FSRow
                 align="center-center"
@@ -66,11 +67,11 @@
                 <FSIcon
                   :color="item.correlated ? ColorEnum.Primary : ColorEnum.Light"
                   :icon="item.correlated ? 'mdi-link' : 'mdi-link-off'"
-                  variant="dark"
+                  :variant="contentVariant"
                 />
               </FSRow>
             </template>
-          </FSClickable>
+          </FSCard>
         </template>
       </FSDataTable>
     </FSFadeOut>
@@ -81,7 +82,7 @@
 import { defineComponent, type PropType, ref, watch } from "vue";
 import _ from "lodash";
 
-import {ColorEnum} from "@dative-gpi/foundation-shared-components/models";
+import {CardVariants, ColorEnum} from "@dative-gpi/foundation-shared-components/models";
 
 import { useDataCategories } from "@dative-gpi/foundation-core-services/composables";
 import type { DataCategoryFilters } from "@dative-gpi/foundation-core-domain/models";
@@ -89,10 +90,10 @@ import type { DataCategoryFilters } from "@dative-gpi/foundation-core-domain/mod
 import FSDataTable from "../FSDataTable.vue";
 import FSCol from "@dative-gpi/foundation-shared-components/components/FSCol.vue";
 import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSCard from "@dative-gpi/foundation-shared-components/components/FSCard.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
 import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
 import FSFadeOut from "@dative-gpi/foundation-shared-components/components/FSFadeOut.vue";
-import FSClickable from "@dative-gpi/foundation-shared-components/components/FSClickable.vue";
 import FSSearchField from "@dative-gpi/foundation-shared-components/components/fields/FSSearchField.vue";
 import FSButtonCheckbox from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonCheckbox.vue";
 
@@ -102,7 +103,7 @@ export default defineComponent({
     FSDataTable,
     FSCol,
     FSFadeOut,
-    FSClickable,
+    FSCard,
     FSRow,
     FSSpan,
     FSSearchField,
@@ -146,6 +147,7 @@ export default defineComponent({
     return {
       fetchingDataCategories,
       dataCategories,
+      CardVariants,
       ColorEnum,
       search,
       correlated,

package/components/lists/dataDefinitions/FSBaseDataDefinitionsList.vue

@@ -28,17 +28,18 @@
     <template
       #item.tile="{ index, item }"
     >
-      <FSClickable
+      <FSCard
         :key="index"
         padding="12px"
         height="60px"
         width="233px"
-        :color="isSelected(item.id) ? ColorEnum.Primary : ColorEnum.Light"
+        :color="ColorEnum.Primary"
+        :variant="isSelected(item.id) ? CardVariants.Standard : CardVariants.Background"
         @click="$emit('update:modelValue', [item.id])"
         v-bind="$attrs"
       >
         <template
-          #default
+          #default="{ contentVariant }"
         >
           <FSRow
             align="center-center"
@@ -54,11 +55,12 @@
             <v-spacer/>
             <FSIcon
               :color="ColorEnum.Primary"
+              :variant="contentVariant"
               icon="mdi-link"
             />
           </FSRow>
         </template>
-      </FSClickable>
+      </FSCard>
     </template>
   </FSDataTable>
 </template>
@@ -67,7 +69,7 @@
 import { defineComponent, type PropType, watch } from "vue";
 import _ from "lodash";
 
-import {ColorEnum} from "@dative-gpi/foundation-shared-components/models";
+import { CardVariants, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import { useDataDefinitions } from "@dative-gpi/foundation-core-services/composables";
 import type { DataDefinitionFilters } from "@dative-gpi/foundation-core-domain/models";
@@ -76,7 +78,7 @@ import FSDataTable from "../FSDataTable.vue";
 import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
-import FSClickable from "@dative-gpi/foundation-shared-components/components/FSClickable.vue";
+import FSCard from "@dative-gpi/foundation-shared-components/components/FSCard.vue";
 import FSButtonCheckbox from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonCheckbox.vue";
 
 export default defineComponent({
@@ -84,7 +86,7 @@ export default defineComponent({
   components: {
     FSButtonCheckbox,
     FSDataTable,
-    FSClickable,
+    FSCard,
     FSSpan,
     FSIcon,
     FSRow,
@@ -123,6 +125,7 @@ export default defineComponent({
     return {
       fetchingDataDefinitions,
       dataDefinitions,
+      CardVariants,
       ColorEnum,
       isSelected
     };

package/components/lists/locations/FSBaseLocationsList.vue

@@ -34,7 +34,7 @@
         :bottomColor="item.colors"
         :address="item.address.placeLabel"
         :selectable="$props.selectable"
-        :singleSelect="$props.singleSelect"
+        :singleSelect="singleSelect"
         :modelValue="isSelected(item.id)"
         :to="$props.itemTo && $props.itemTo(item)"
         @update:modelValue="toggleSelect(item)"

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.0.194-playlists-02",
+  "version": "1.0.194-sandbox",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,21 +13,21 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-core-domain": "1.0.194-playlists-02",
-    "@dative-gpi/foundation-core-services": "1.0.194-playlists-02",
-    "@dative-gpi/foundation-shared-components": "1.0.194-playlists-02",
-    "@dative-gpi/foundation-shared-domain": "1.0.194-playlists-02",
-    "@dative-gpi/foundation-shared-services": "1.0.194-playlists-02"
+    "@dative-gpi/foundation-core-domain": "1.0.194-sandbox",
+    "@dative-gpi/foundation-core-services": "1.0.194-sandbox",
+    "@dative-gpi/foundation-shared-components": "1.0.194-sandbox",
+    "@dative-gpi/foundation-shared-domain": "1.0.194-sandbox",
+    "@dative-gpi/foundation-shared-services": "1.0.194-sandbox"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
     "color": "^4.2.3",
-    "vue": "^3.4.38"
+    "vue": "^3.5.26"
   },
   "devDependencies": {
     "@types/color": "3.0.6",
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "aadd89bd31e3423781f48a258c89ababbbcb00cb"
+  "gitHead": "456a9bcb78b6f7cbacc1c9845f68cbbf62320dbb"
 }

package/components/lists/playlists/FSTilePlaylistsList.vue

@@ -1,93 +0,0 @@
-<template>
-  <FSTileList
-    :items="playlists"
-    :loading="fetching"
-    :selectable="$props.selectable"
-    :singleSelect="$props.singleSelect"
-    :modelValue="$props.modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-    v-bind="$attrs"
-  >
-    <template
-      v-for="(_, name) in $slots"
-      v-slot:[name]="slotData"
-    >
-      <slot
-        :name="name"
-        v-bind="slotData"
-      />
-    </template>
-    <template
-      #item.tile="{ item, toggleSelect, direction }"
-    >
-      <FSPlaylistTileUI
-        :dashboardsCount="item.dashboards.length"
-        :selectable="$props.selectable"
-        :singleSelect="$props.singleSelect"
-        :modelValue="($props.modelValue ?? []).includes(item.id)"
-        :width="direction === ListDirections.Column ? 'fill' : undefined"
-        @update:modelValue="toggleSelect(item)"
-        v-bind="item"
-      />
-    </template>
-  </FSTileList>
-</template>
-
-<script lang="ts">
-import type { PropType} from "vue";
-import { defineComponent, watch } from "vue";
-
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { ListDirections } from "@dative-gpi/foundation-shared-domain/enums";
-
-import type { PlaylistFilters } from "@dative-gpi/foundation-core-domain/models";
-import { usePlaylists } from "@dative-gpi/foundation-core-services/composables";
-
-import FSPlaylistTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSPlaylistTileUI.vue";
-import FSTileList from "@dative-gpi/foundation-shared-components/components/lists/FSTileList.vue";
-
-
-export default defineComponent({
-  title: "FSTilePlaylistsList",
-  components: {
-    FSPlaylistTileUI,
-    FSTileList
-  },
-  props: {
-    playlistFilters: {
-      type: Object as PropType<PlaylistFilters>,
-      required: true
-    },
-    modelValue: {
-      type: Array as PropType<string[]>,
-      required: false,
-      default: () => []
-    },
-    selectable: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    singleSelect: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-  },
-  setup(props) {
-    const { entities: playlists, getMany, fetching } = usePlaylists();
-
-    const fetch = () => {
-      getMany(props.playlistFilters);
-    };
-
-    watch(() => props.playlistFilters, fetch, { immediate: true });
-    return {
-      ListDirections,
-      playlists,
-      ColorEnum,
-      fetching
-    };
-  }
-});
-</script>

package/components/tiles/FSPlaylistTile.vue

@@ -1,78 +0,0 @@
-<template>
-  <FSLoadTile
-    v-if="getting"
-    :selectable="$props.selectable"
-    :modelValue="$props.modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-  />
-  <PlaylistTileUI
-    v-else-if="entity"
-    :dashboardsCount="entity.dashboards?.length ?? 0"
-    :looped="entity.looped"
-    :delay="entity.delay"
-    :label="entity.label"
-    :code="entity.code"
-    :selectable="$props.selectable"
-    :modelValue="$props.modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-    v-bind="$attrs"
-  >
-    <template
-      v-for="(_, name) in $slots"
-      v-slot:[name]="slotData"
-    >
-      <slot
-        :name="name"
-        v-bind="slotData"
-      />
-    </template>
-  </PlaylistTileUI>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, watch } from "vue";
-
-import { usePlaylist } from "@dative-gpi/foundation-core-services/composables";
-
-import PlaylistTileUI from "@dative-gpi/foundation-shared-components/components/tiles/FSPlaylistTileUI.vue";
-
-export default defineComponent({
-  name: "FSPlaylistTile",
-  components: {
-    PlaylistTileUI
-  },
-  props: {
-    playlistId: {
-      type: String,
-      required: true
-    },
-    modelValue: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    selectable: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props) {
-    const { get, getting, entity } = usePlaylist();
-
-    onMounted(() => {
-      get(props.playlistId);
-    });
-
-    watch(() => props.playlistId, () => {
-      get(props.playlistId);
-    });
-
-    return {
-      getting,
-      entity
-    };
-  }
-});
-</script>