@dative-gpi/foundation-shared-components 1.0.180-fix-utils-composable → 1.0.180-sandbox-widget-connectivity

package/components/FSWidgetStandardOptions.vue

@@ -0,0 +1,64 @@
+<template>
+  <FSRow
+    align="bottom-left"
+    :wrap="false"
+    gap="16px"
+  >
+    <FSRow
+      align="bottom-center"
+    >
+      <FSNumberField
+        :label="$tr('entity.widget.width', 'Width')"
+        :modelValue="widgetWidth"
+        @update:modelValue="$emit('update:widgetWidth', $event)"
+      />
+      <FSNumberField
+        :label="$tr('entity.widget.height', 'Height')"
+        :modelValue="widgetHeight"
+        @update:modelValue="$emit('update:widgetHeight', $event)"
+      />
+      <FSRow
+        width="hug"
+      >
+        <FSSwitch
+          class="dialog-configure-widget-hide-borders"
+          :label="$tr('entity.widget.hide-borders', 'Hide borders')"
+          :modelValue="hideBorders"
+          @update:modelValue="$emit('update:hideBorders', $event)"
+        />
+      </FSRow>
+    </FSRow>
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import FSRow from "./FSRow.vue";
+import FSNumberField from "./fields/FSNumberField.vue";
+import FSSwitch from "./FSSwitch.vue";
+
+export default defineComponent({
+  name: "WidgetStandardOptions",
+  components: {
+    FSRow,
+    FSNumberField,
+    FSSwitch
+  },
+  props: {
+    widgetWidth: {
+      type: Number,
+      required: true
+    },
+    widgetHeight: {
+      type: Number,
+      required: true
+    },
+    hideBorders: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ["update:widgetWidth", "update:widgetHeight", "update:hideBorders"]
+});
+</script>

package/components/FSWidgetTemplateCard.vue

@@ -0,0 +1,51 @@
+<template>
+  <FSCard
+    height="100px"
+    width="100%"
+  >
+    <FSCol
+      align="center-center"
+    >
+      <FSIcon
+        v-if="icon"
+        size="32px"
+      >
+        {{icon }}
+      </FSIcon>
+      <FSText
+        font="text-overline"
+      >
+        {{ label }}
+      </FSText>
+    </FSCol>
+  </FSCard>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import FSCard from "./FSCard.vue";
+import FSCol from "./FSCol.vue";
+import FSIcon from "./FSIcon.vue";
+import FSText from "./FSText.vue";
+
+export default defineComponent({
+  name: "FSWidgetTemplateCard",
+  components: {
+    FSCard,
+    FSCol,
+    FSIcon,
+    FSText
+  },
+  props: {
+    icon: { 
+      type: String, 
+      required: false 
+    },
+    label: { 
+      type: String, 
+      required: true 
+    }
+  }
+});
+</script>

package/composables/index.ts

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

package/composables/useAccessibilityPreferences.ts

@@ -1,19 +1,30 @@
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const PREFERS_REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 
 export function useAccessibilityPreferences() {
   const prefersReducedMotion = ref(false);
+  let mediaQuery: MediaQueryList | null = null;
+
+  const handleChange = (e: MediaQueryListEvent) => {
+    prefersReducedMotion.value = e.matches;
+  };
   
   onMounted(() => {
-    prefersReducedMotion.value = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches || false;
+    prefersReducedMotion.value = window.matchMedia?.(PREFERS_REDUCED_MOTION_QUERY)?.matches || false;
     
-    const mediaQuery = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    mediaQuery = window.matchMedia?.(PREFERS_REDUCED_MOTION_QUERY) || null;
     if (mediaQuery?.addEventListener) {
-      mediaQuery.addEventListener('change', (e) => {
-        prefersReducedMotion.value = e.matches;
-      });
+      mediaQuery.addEventListener('change', handleChange);
     }
   });
-  
+
+  onBeforeUnmount(() => {
+    if (mediaQuery?.removeEventListener) {
+      mediaQuery.removeEventListener('change', handleChange);
+    }
+  });
+
   return {
     prefersReducedMotion
   };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.180-fix-utils-composable",
+  "version": "1.0.180-sandbox-widget-connectivity",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.180-fix-utils-composable",
-    "@dative-gpi/foundation-shared-services": "1.0.180-fix-utils-composable"
+    "@dative-gpi/foundation-shared-domain": "1.0.180-sandbox-widget-connectivity",
+    "@dative-gpi/foundation-shared-services": "1.0.180-sandbox-widget-connectivity"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "b8bbf51892bfcd61e7fdd2d89b4378203ab5cf6d"
+  "gitHead": "42243848637629e96d56ea83c0bcddc411a61ade"
 }