@dative-gpi/foundation-shared-components 1.0.194-dynamic-v-node → 1.0.194-playlists-02

package/components/FSIconCheck.vue

@@ -28,10 +28,18 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    variant: {
+      type: String as () => "fill" | "outline",
+      required: false,
+      default: "outline"
     }
   },
   setup(props) {
     const icon = computed((): string => {
+      if (props.variant === "fill") {
+        return props.value ? "mdi-check-circle" : "mdi-close-circle";
+      }
       return props.value ? "mdi-check-circle-outline" : "mdi-close-circle-outline";
     });
 

package/components/lists/FSTileList.vue

@@ -2,12 +2,21 @@
   <FSCol
     gap="12px"
   >
-    <FSSearchField
-      v-if="$props.searchable"
-      :hideHeader="true"
-      :modelValue="actualSearch"
-      @update:modelValue="onSearch"
-    />
+    <FSRow
+      v-if="$props.searchable || $slots.action"
+      :wrap="false"
+      align="center-left"
+    >
+      <FSSearchField
+        v-if="$props.searchable"
+        :hideHeader="true"
+        :modelValue="actualSearch"
+        @update:modelValue="onSearch"
+      />
+      <slot
+        name="action"
+      />
+    </FSRow>
     <FSFadeOut
       v-if="$props.direction == ListDirections.Column"
       :maxHeight="$props.maxHeight"
@@ -109,11 +118,13 @@ import FSFadeOut from "../FSFadeOut.vue";
 import FSSlideGroup from "../FSSlideGroup.vue"
 import FSSearchField from "../fields/FSSearchField.vue";
 import FSSimpleTileUI from "../tiles/FSSimpleTileUI.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSTileList",
   components: {
     FSCol,
+    FSRow,
     FSFadeOut,
     FSLoader,
     FSSlideGroup,
@@ -223,6 +234,12 @@ export default defineComponent({
       actualSearch.value = value;
     });
 
+    watch(() => props.singleSelect, () => {
+      if(props.singleSelect && props.modelValue.length > 1) { 
+        emit("update:modelValue", []); 
+      } 
+    });
+
     return {
       actualSearch,
       filteredItems,

package/components/map/FSMapMarker.vue

@@ -47,30 +47,26 @@ export default {
     to: {
       type: Object as PropType<RouteLocation | null>,
       required: false
-    },
-    html: {
-      type: String,
-      required: false
     }
   },
   emits: ['click', 'auxclick'],
   setup(props, { emit }) {
     const map = inject<Ref<Map | null>>(MAP);
     const markerClusterGroup = inject<Ref<MarkerClusterGroup | null>>(MARKERCLUSTERGROUP, ref(null));
-
+      
     const { getColors } = useColors();
     const { handleRoutingEvent } = useRouting();
 
-    if (!map) {
+    if(!map) {
       throw new Error('FSMapTileLayer must be used inside a FSMap component');
     }
 
-    if (!map.value) {
+    if(!map.value) {
       throw new Error('FSMapTileLayer must be used inside a FSMap component with a map');
     }
-
+      
     const getMarkerIcon = () => {
-      if (props.variant === 'gps') {
+      if(props.variant === 'gps') {
         const size = 16;
         return divIcon({
           html: gpsMarkerHtml(),
@@ -80,7 +76,7 @@ export default {
         });
       }
 
-      if (props.variant === 'location') {
+      if(props.variant === 'location') {
         const size = 36;
         return divIcon({
           html: locationMarkerHtml(props.icon ?? "mdi-map-marker", getColors(props.color).base, props.label),
@@ -92,7 +88,7 @@ export default {
 
       const size = 16;
       return divIcon({
-        html: props.html ?? pinMarkerHtml(getColors(props.color).base, props.label),
+        html: pinMarkerHtml(getColors(props.color).base, props.label),
         iconSize: [size, size],
         className: props.selected ? 'fs-map-marker fs-map-pin fs-map-pin-selected' : 'fs-map-marker fs-map-pin',
         iconAnchor: [size / 2, size / 2],
@@ -106,11 +102,11 @@ export default {
     });
 
     const onClick = (event: MouseEvent) => {
-      if (props.to) {
+      if(props.to) {
         handleRoutingEvent(event, props.to, true);
         return;
       }
-
+      
       emit('click', {
         ...event,
         latlng: props.latlng
@@ -118,7 +114,7 @@ export default {
     }
 
     const onAuxClick = (event: MouseEvent) => {
-      if (props.to) {
+      if(props.to) {
         handleRoutingEvent(event, props.to);
         return;
       }
@@ -130,11 +126,11 @@ export default {
     }
 
     watch(map, () => {
-      if (!map.value) {
+      if(!map.value) {
         return;
       }
 
-      if (markerClusterGroup && markerClusterGroup.value) {
+      if(markerClusterGroup && markerClusterGroup.value) {
         actualMarker.value.addTo(markerClusterGroup.value);
       } else {
         actualMarker.value.addTo(map.value);
@@ -142,7 +138,7 @@ export default {
     }, { immediate: true });
 
     watch([() => props.variant, () => props.color, () => props.selected], () => {
-      if (!actualMarker.value || !map.value) {
+      if(!actualMarker.value || !map.value) {
         return;
       }
 
@@ -151,7 +147,7 @@ export default {
     });
 
     watch([() => props.latlng?.lat, () => props.latlng?.lng], () => {
-      if (!actualMarker.value || !map.value || !props.latlng) {
+      if(!actualMarker.value || !map.value || !props.latlng) {
         return;
       }
 
@@ -159,7 +155,7 @@ export default {
     });
 
     watch(markerElement, (newMarkerElement) => {
-      if (!newMarkerElement) {
+      if(!newMarkerElement) {
         return;
       }
 
@@ -168,8 +164,8 @@ export default {
     }, { immediate: true });
 
     onUnmounted(() => {
-      if (actualMarker.value && map.value) {
-        if (markerClusterGroup && markerClusterGroup.value) {
+      if(actualMarker.value && map.value) {
+        if(markerClusterGroup && markerClusterGroup.value) {
           markerClusterGroup.value.removeLayer(actualMarker.value as Marker);
         } else {
           map.value.removeLayer(actualMarker.value as Marker);

package/components/tiles/FSPlaylistTileUI.vue

@@ -0,0 +1,145 @@
+<template>
+  <FSTile
+    :activeColor="ColorEnum.Primary"
+    :modelValue="$props.modelValue"
+    :width="$props.width"
+    :height="$props.height"
+    padding="16px 24px"
+    v-bind="$attrs"
+  >
+    <FSRow
+      :wrap="false"
+    >
+      <FSCol
+        gap="16px"
+        width="fill"
+      >
+        <FSText
+          font="text-button"
+        >
+          {{ $props.label }}
+        </FSText>
+        <FSRow
+          :wrap="false"
+          align="center-left"
+        >
+          <FSIcon>
+            mdi-view-dashboard-outline
+          </FSIcon>
+          <FSText
+            font="text-overline"
+          >
+            {{ $tr('ui.dashboards.dynamic', '{0} dashboard(s)', $props.dashboardsCount) }}
+          </FSText>
+        </FSRow>
+        <FSRow
+          :wrap="false"
+          align="center-left"
+        >
+          <FSIconCheck
+            variant="fill"
+            :value="automaticTransition"
+          />
+          <FSText
+            font="text-overline"
+          >
+            {{ automaticTransition
+              ? $tr('ui.playlist.transition-delay.dynamic', 'Transition : {0}', getTimeBestString($props.delay ?? 0))
+              : $tr('ui.playlist.automatic-transition', 'Automatic transition')
+            }}
+          </FSText>
+        </FSRow>
+        <FSRow
+          :wrap="false"
+          align="center-left"
+        >
+          <FSIconCheck
+            variant="fill"
+            :value="$props.looped"
+          />
+          <FSText
+            font="text-overline"
+          >
+            {{ $tr('entity.playlist.looped', 'Looped') }}
+          </FSText>
+        </FSRow>
+      </FSCol>
+      <slot
+        name="actions"
+      />
+    </FSRow>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import { getTimeBestString } from "@dative-gpi/foundation-shared-components/utils";
+
+import FSIconCheck from "../FSIconCheck.vue";
+import FSTile from "../tiles/FSTile.vue";
+import FSIcon from "../FSIcon.vue";
+import FSText from "../FSText.vue";
+import FSRow from "../FSRow.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSPlaylistTileUI",
+  components: {
+    FSIconCheck,
+    FSIcon,
+    FSTile,
+    FSText,
+    FSRow,
+    FSCol
+  },
+  inheritAttrs: false,
+  props: {
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => [352, 336]
+    },
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: () => 'hug'
+    },
+    label: {
+      type: String as PropType<string>,
+      required: true
+    },
+    dashboardsCount: {
+      type: Number,
+      required: true
+    },
+    delay: {
+      type: Number ,
+      required: false
+    },
+    looped: {
+      type: Boolean,
+      required: true
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup(props) {
+
+    const automaticTransition = computed((): boolean => {
+      return props.delay ? props.delay > 0 : false;
+    });
+
+    return {
+      getTimeBestString,
+      automaticTransition,
+      ColorEnum
+    };
+  }
+});
+</script>

package/composables/index.ts

@@ -5,7 +5,6 @@ export * from "./useBreakpoints";
 export * from "./useColors";
 export * from "./useCountUp";
 export * from "./useDebounce";
-export * from "./useDynamicVNode";
 export * from "./useElementVisibility";
 export * from "./useMapLayers";
 export * from "./useRules";

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.0.194-dynamic-v-node",
+  "version": "1.0.194-playlists-02",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,8 +13,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.194-dynamic-v-node",
-    "@dative-gpi/foundation-shared-services": "1.0.194-dynamic-v-node"
+    "@dative-gpi/foundation-shared-domain": "1.0.194-playlists-02",
+    "@dative-gpi/foundation-shared-services": "1.0.194-playlists-02"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -38,5 +38,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "bae28f289de25e748becbaf3e7d5f6c9bdc12934"
+  "gitHead": "aadd89bd31e3423781f48a258c89ababbbcb00cb"
 }

package/composables/useDynamicVNode.ts

@@ -1,60 +0,0 @@
-import { uuidv4 } from "@dative-gpi/bones-ui";
-import { h, render, nextTick, getCurrentInstance, onBeforeUnmount, type Component, type VNode } from "vue";
-
-export function useDynamicVNode<TProps extends Record<string, any>>(component: Component) {
-  const id = uuidv4();
-
-  let vnode: VNode | null = null;
-  let container: HTMLElement | null = null;
-
-  const instance = getCurrentInstance();
-  if (!instance) {
-    throw new Error("useDynamicVNode must be used inside setup()");
-  }
-
-  const appContext = instance.appContext;
-
-  const mount = async (props: TProps) => {
-    await nextTick();
-
-    const mountPoint = document.getElementById(id);
-    if (!mountPoint) {
-      return;
-    }
-
-    unmount();
-
-    container = mountPoint;
-
-    vnode = h(component, props);
-    vnode.appContext = appContext;
-
-    render(vnode, container);
-  };
-
-  const unmount = () => {
-    if (container) {
-      render(null, container);
-    }
-    vnode = null;
-    container = null;
-  };
-
-  const sanitizeStyle = (style?: string): string =>
-    style
-      ? style.replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
-      : "";
-
-  const getHtml = (style?: string) => {
-    const safeStyle = sanitizeStyle(style);
-    return `<div id="${id}"${safeStyle ? ` style="${safeStyle}"` : ""}></div>`;
-  };
-
-  onBeforeUnmount(unmount);
-
-  return {
-    mount,
-    unmount,
-    getHtml
-  };
-}