@dative-gpi/foundation-shared-components 0.0.215 → 0.0.216

package/components/FSFadeOut.vue

@@ -11,8 +11,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, onUnmounted, type PropType, ref, watch } from "vue";
 
 import { useBreakpoints, useColors, useDebounce } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";

package/components/FSOptionGroup.vue

@@ -14,9 +14,10 @@
       >
         <FSOptionItem
           v-for="(item, index) in props.values"
+          :padding="props.optionPadding"
+          :editable="props.editable"
           :prependIcon="item.prependIcon"
           :appendIcon="item.appendIcon"
-          :editable="props.editable"
           :variant="getVariant(item)"
           :color="getColor(item)"
           :class="getClass(item)"
@@ -59,9 +60,10 @@
       >
         <FSOptionItem
           v-for="(item, index) in props.values"
+          :padding="props.optionPadding"
+          :editable="props.editable"
           :prependIcon="item.prependIcon"
           :appendIcon="item.appendIcon"
-          :editable="props.editable"
           :variant="getVariant(item)"
           :color="getColor(item)"
           :class="getClass(item)"
@@ -92,14 +94,11 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum, type FSToggle } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
-import type { FSToggle } from "@dative-gpi/foundation-shared-components/models"; 
 
 import FSOptionItem from "./FSOptionItem.vue";
 import FSSlideGroup from "./FSSlideGroup.vue";
@@ -178,6 +177,11 @@ export default defineComponent({
       required: false,
       default: "3px"
     },
+    optionPadding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "4px"
+    },
     gap: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,

package/components/FSOptionItem.vue

@@ -1,13 +1,12 @@
 <template>
   <FSClickable
-    padding="4px"
     :editable="$props.editable"
     :height="['32px', '28px']"
+    :padding="$props.padding"
     :variant="$props.variant"
     :color="$props.color"
     :load="$props.load"
     :border="false"
-    :width="width"
     @click.stop="onClick"
     v-bind="$attrs"
   >
@@ -52,12 +51,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { sizeToVar, varToSize } from "@dative-gpi/foundation-shared-components/utils";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
 import FSClickable from "./FSClickable.vue";
@@ -99,16 +95,16 @@ export default defineComponent({
       required: false,
       default: "standard"
     },
-    ItemWidth: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: () => ["32px","28px"]
-    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
     },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "4px"
+    },
     load: {
       type: Boolean,
       required: false,
@@ -126,13 +122,6 @@ export default defineComponent({
 
     const colors = computed(() => getColors(props.color));
 
-    const width = computed((): string => {
-      if (props.label) {
-        return "fit-content";
-      }
-      return sizeToVar(varToSize(props.ItemWidth));
-    });
-
     const onClick = (event: MouseEvent) => {
       if (props.editable && !props.load) {
         emit("click", event);
@@ -141,7 +130,6 @@ export default defineComponent({
 
     return {
       colors,
-      width,
       onClick
     };
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.215",
+  "version": "0.0.216",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.215",
-    "@dative-gpi/foundation-shared-services": "0.0.215"
+    "@dative-gpi/foundation-shared-domain": "0.0.216",
+    "@dative-gpi/foundation-shared-services": "0.0.216"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "0d0aafb99e7a818b3606c3ac8bea917213e389ad"
+  "gitHead": "f4cd126d13779ae55d565f2b11efd30f338757f3"
 }