@dative-gpi/foundation-shared-components 1.0.138 → 1.0.139-chartlists

package/components/fields/FSClosableSearchField.vue

@@ -0,0 +1,83 @@
+<template>
+  <FSSearchField
+    :modelValue="$props.modelValue"
+    :appendInnerIcon="$props.closable ? $props.appendInnerIcon : null"
+    :clearable="false"
+    @click:appendInner="onCloseClicked"
+    @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>
+  </FSSearchField>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import FSSearchField from "./FSSearchField.vue";
+
+export default defineComponent({
+  name: "FSClosableSearchField",
+  components: {
+    FSSearchField
+  },
+  props: {
+    closable: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    unfocusOnClose: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    clearOnClose: {
+      type: Boolean as PropType<boolean>,
+      required: false,
+      default: true
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    appendInnerIcon: {
+      type: String as PropType<string | undefined>,
+      required: false,
+      default: 'mdi-close'
+    }
+  },
+  emits: ["update:modelValue", "close"],
+  setup(props, { emit }) {
+    const onCloseClicked = ($event: MouseEvent) => {
+      if(!props.closable) {
+        return;
+      }
+
+      if (props.unfocusOnClose) {
+        $event.preventDefault();
+        $event.stopPropagation();
+        (document.activeElement  as HTMLElement)?.blur();
+      }
+      if (props.clearOnClose) {
+        emit('update:modelValue', null);
+      }
+
+      emit('close');
+    };
+
+    return {
+      onCloseClicked
+    };
+  }
+});
+</script>

package/components/tiles/FSChartTileUI.vue

@@ -2,6 +2,7 @@
   <FSTile
     :width="['275px','336px']"
     :height="['124px','156px']"
+    :editable="$props.editable"
     borderRadius="8px"
     v-bind="$attrs"
   >
@@ -99,6 +100,11 @@ export default defineComponent({
       type: Number as PropType<ChartType>,
       required: false,
       default: ChartType.None
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   setup() {

package/components/tiles/FSTile.vue

@@ -4,58 +4,54 @@
     :height="$props.height"
     :width="$props.width"
   >
-    <template
-      v-if="$props.editable"
+    <FSClickable
+      v-if="$props.editable && $props.singleSelect"
+      padding="12px"
+      :variant="variant"
+      :color="color"
+      :style="style"
+      :to="$props.to"
+      :href="$props.href" 
+      width="100%"
+      height="100%"
+      @click="() => $emit('update:modelValue', !$props.modelValue)"
+      v-bind="$attrs"
     >
-      <FSClickable
-        v-if="$props.singleSelect"
-        padding="12px"
-        :variant="variant"
-        :color="color"
-        :style="style"
-        width="100%"
-        height="100%"
-        @click="() => $emit('update:modelValue', !$props.modelValue)"
-        v-bind="$attrs"
-      >
-        <slot />
-      </FSClickable>
-      <FSClickable
-        v-else-if="$props.href || $props.to || $attrs.onClick"
-        variant="background"
-        class="fs-tile"
-        padding="12px"
-        :color="ColorEnum.Background"
-        :href="$props.href"
-        width="100%"
-        height="100%"
-        :to="$props.to"
-        :style="style"
-        v-bind="$attrs"
+      <slot />
+    </FSClickable>
+
+    
+    <FSClickable
+      v-else-if="$props.editable && ($props.href || $props.to || $attrs.onClick)"
+      variant="background"
+      class="fs-tile"
+      padding="12px"
+      :href="$props.href"
+      width="100%"
+      height="100%"
+      :to="$props.to"
+      :style="style"
+      v-bind="$attrs"
+    >
+      <slot />
+      <FSCard
+        class="fs-tile-checkbox"
+        :height="['40px', '32px']"
+        :width="['40px', '32px']"
+        :border="false"
       >
-        <slot />
-        <FSCard
-          v-if="$props.editable"
-          class="fs-tile-checkbox"
-          variant="background"
-          :height="['40px', '32px']"
-          :width="['40px', '32px']"
-          :border="false"
-          v-bind="$attrs"
-        >
-          <FSCheckbox
-            :modelValue="$props.modelValue"
-            @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-          />
-        </FSCard>
-      </FSClickable>
-    </template>
+        <FSCheckbox
+          :modelValue="$props.modelValue"
+          @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
+        />
+      </FSCard>
+    </FSClickable>
+    
     <FSCard
       v-else
       variant="background"
       class="fs-tile"
       padding="12px"
-      :color="color"
       :style="style"
       width="100%"
       height="100%"
@@ -69,7 +65,6 @@
         :height="['40px', '32px']"
         :width="['40px', '32px']"
         :border="false"
-        v-bind="$attrs"
       >
         <FSCheckbox
           :modelValue="$props.modelValue"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.138",
+  "version": "1.0.139-chartlists",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.138",
-    "@dative-gpi/foundation-shared-services": "1.0.138"
+    "@dative-gpi/foundation-shared-domain": "1.0.139-chartlists",
+    "@dative-gpi/foundation-shared-services": "1.0.139-chartlists"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "ec1370eef99afdec2bd4425c7010c1012c23563e"
+  "gitHead": "d6d4df26014365b637a93c3e05c616616159a6f7"
 }