@dative-gpi/foundation-shared-components 0.0.26 → 0.0.28

package/components/FSAccordionPanel.vue

@@ -70,48 +70,45 @@ export default defineComponent({
       required: false,
       default: null
     },
-    borderRadius: {
+    paddingTitle: {
       type: [String, Number],
       required: false,
-      default: "4px"
+      default: "16px"
+    },
+    paddingContent: {
+      type: [String, Number],
+      required: false,
+      default: "16px"
     },
     divider: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     },
     expandIcon: {
       type: String,
       required: false,
-      default: "mdi-chevron-down"
+      default: ""
     },
     collapseIcon: {
       type: String,
       required: false,
-      default: "mdi-chevron-up"
-    },
-    color: {
-      type: String as PropType<ColorBase>,
-      required: false,
-      default: ColorEnum.Primary
+      default: ""
     }
   },
   setup(props) {
     const { getColors } = useColors();
 
-    const colors = computed(() => getColors(props.color));
     const backgrounds = getColors(ColorEnum.Background);
-    const darks = getColors(ColorEnum.Dark);
+    const lights = getColors(ColorEnum.Light);
 
     const style = computed((): {[code: string]: string} & Partial<CSSStyleDeclaration> => {
       return {
-        "--fs-accordion-panel-border-radius"         : sizeToVar(props.borderRadius),
-        "--fs-accordion-panel-border-size"           : props.divider ? "1px" : "0",
-        "--fs-accordion-panel-border-color"          : darks.base,
-        "--fs-accordion-panel-background-color"      : backgrounds.base,
-        "--fs-accordion-panel-color"                 : darks.base,
-        "--fs-accordion-panel-hover-background-color": colors.value.light,
-        "--fs-accordion-panel-hover-color"           : colors.value.base,
+        "--fs-accordion-panel-padding-title"         : sizeToVar(props.paddingTitle),
+        "--fs-accordion-panel-padding-content"       : sizeToVar(props.paddingContent),
+        "--fs-accordion-panel-divider-size"          : props.divider ? "1px" : "0",
+        "--fs-accordion-panel-divider-color"         : lights.dark,
+        "--fs-accordion-panel-background-color"      : backgrounds.base
       };
     });
 

package/components/FSClickable.vue

@@ -2,6 +2,7 @@
   <button
     v-if="!href"
     :class="wrapperClasses"
+    :type="$props.type"
     @click.stop="onClick"
   >
     <FSCard
@@ -69,10 +70,15 @@ export default defineComponent({
       required: false,
       default: "standard"
     },
+    type: {
+      type: String as PropType<"button" | "submit">,
+      required: false,
+      default: "submit"
+    },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
-      default: ColorEnum.Primary
+      default: ColorEnum.Light
     },
     fullWidth: {
       type: Boolean,

package/components/FSFadeOut.vue

@@ -11,23 +11,28 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, Ref, ref } from "vue";
+import { computed, defineComponent, PropType, ref } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-
-import FSCol from "./FSCol.vue";
+import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
 
 export default defineComponent({
   name: "FSFadeOut",
-  components: {
-    FSCol
-  },
   props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number>,
+      required: true
+    },
+    padding: {
+      type: [String, Number],
+      required: false,
+      default: "0"
+    },
     maskHeight: {
-      type: Number,
+      type: [String, Number],
       required: false,
-      default: 64
+      default: "64px"
     }
   },
   setup(props) {
@@ -35,23 +40,59 @@ export default defineComponent({
 
     const backgrounds = getColors(ColorEnum.Background);
 
-    const style: Ref<{ [code: string]: string } & Partial<CSSStyleDeclaration>> = ref({
-      "--fs-fade-out-mask-color"        : backgrounds.base,
-      "--fs-fade-out-top-mask-height"   : "0px",
-      "--fs-fade-out-bottom-mask-height": `${props.maskHeight}px`
+    const topMaskHeight = ref("0px");
+    const bottomMaskHeight = ref(sizeToVar(props.maskHeight));
+
+    const style = computed((): { [code: string]: string } & Partial<CSSStyleDeclaration> => {
+      return {
+        "--fs-fade-out-height"            : sizeToVar(props.height),
+        "--fs-fade-out-padding"           : sizeToVar(props.padding),
+        "--fs-fade-out-mask-color"        : backgrounds.base,
+        "--fs-fade-out-top-mask-height"   : topMaskHeight.value,
+        "--fs-fade-out-top-mask-top"      : topPadding.value,
+        "--fs-fade-out-bottom-mask-height": bottomMaskHeight.value,
+        "--fs-fade-out-bottom-mask-bottom": bottomPadding.value
+      };
+    });
+
+    const topPadding = computed((): string => {
+      switch (typeof props.padding) {
+        case "number": return sizeToVar(props.padding);
+        default: 
+          const paddings = props.padding.split(" ");
+          switch (paddings.length) {
+            case 0 : return "0px";
+            default: return "-" + sizeToVar(paddings[0]);
+          }
+      }
+    });
+
+    const bottomPadding = computed((): string => {
+      switch (typeof props.padding) {
+        case "number": return sizeToVar(props.padding);
+        default: 
+          const paddings = props.padding.split(" ");
+          switch (paddings.length) {
+            case 0 : return "0px";
+            case 1 :
+            case 2 : return "-" + sizeToVar(paddings[0]);
+            default: return "-" + sizeToVar(paddings[2]);
+          }
+      }
     });
 
     const onScroll = ({ target }): void => {
       if (target.scrollHeight - target.scrollTop - target.clientHeight < 1) {
-        style.value["--fs-fade-out-bottom-mask-height"] = "0px";
-      } else {
-        style.value["--fs-fade-out-bottom-mask-height"] = `${props.maskHeight}px`;
+        bottomMaskHeight.value = "0px";
+      }
+      else {
+        bottomMaskHeight.value = sizeToVar(props.maskHeight);
       }
       if (target.scrollTop === 0) {
-        style.value["--fs-fade-out-top-mask-height"] = "0px";
+        topMaskHeight.value = "0px";
       }
       else {
-        style.value["--fs-fade-out-top-mask-height"] = `${props.maskHeight}px`;
+        topMaskHeight.value = sizeToVar(props.maskHeight);
       }
     }
 

package/components/FSToggleSet.vue

@@ -148,12 +148,12 @@ export default defineComponent({
     padding: {
       type: [String, Number],
       required: false,
-      default: 0
+      default: "0"
     },
     gap: {
-      type: Number,
+      type: [String, Number],
       required: false,
-      default: 8
+      default: "8px"
     },
     multiple: {
       type: Boolean,

package/components/fields/FSColorField.vue

@@ -38,6 +38,7 @@
             </template>
           </FSTextField>
           <FSTextField
+            v-if="$props.allowOpacity"
             class="fs-color-field-opacity"
             :label="$tr('ui.color-field.opacity', 'Opacity')"
             :hideHeader="$props.hideHeader"
@@ -90,7 +91,7 @@
           class="fs-color-field-picker"
           mode="hexa"
           :elevation="0"
-          :modes="['hexa', 'rgba']"
+          :modes="allowOpacity ? ['hexa', 'rgba'] : ['hex', 'rgb']"
           :modelValue="fullColor"
           @update:modelValue="onSubmit"
         />
@@ -153,6 +154,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    allowOpacity: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   emits: ["update:modelValue", "update:opacity"],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.26",
+  "version": "0.0.28",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.26",
-    "@dative-gpi/foundation-shared-services": "0.0.26",
+    "@dative-gpi/foundation-shared-domain": "0.0.28",
+    "@dative-gpi/foundation-shared-services": "0.0.28",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "58a49a5422156548728d405e3c289ba4e80cbe39"
+  "gitHead": "45b9e0404609c0003f918d847f47b5395152df2a"
 }

package/styles/components/fs_accordion_panel.scss

@@ -1,38 +1,32 @@
 .fs-accordion-panel > .v-expansion-panel-title {
-    border-radius: var(--fs-accordion-panel-border-radius) !important;
-    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    min-height: 0 !important;
-    cursor: pointer;
-    padding: 12px;
-    
     background-color: var(--fs-accordion-panel-background-color) !important;
-    color: var(--fs-accordion-panel-color) !important;
+    padding: var(--fs-accordion-panel-padding-title);
+    min-height: 0 !important;
 
     &:hover,
     &--active {
-        background-color: var(--fs-accordion-panel-hover-background-color) !important;
-        color: var(--fs-accordion-panel-hover-color) !important;
-        min-height: 0 !important;
+        background-color: var(--fs-accordion-panel-background-color) !important;
 
         & .fs-accordion-panel-title {
             @extend .text-button 
         }
     }
+
+    & > .v-expansion-panel-title__overlay {
+        display: none !important;
+    }
 }
 
 .fs-accordion-panel > .v-expansion-panel-text {
-    border-radius: var(--fs-accordion-panel-border-radius) !important;
-    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    padding: 12px;
-    
     background-color: var(--fs-accordion-panel-background-color) !important;
-    color: var(--fs-accordion-panel-color) !important;
+    padding: 0px;
+    
 
     & > .v-expansion-panel-text__wrapper {
-        padding: 0;
+        padding: var(--fs-accordion-panel-padding-content);
     }
 }
 
 .v-expansion-panel:not(:first-child)::after {
-    border-top: var(--fs-accordion-panel-border-size) solid var(--fs-accordion-panel-border-color) !important;
+    border-top: var(--fs-accordion-panel-divider-size) solid var(--fs-accordion-panel-divider-color) !important;
 }

package/styles/components/fs_fade_out.scss

@@ -1,6 +1,8 @@
 .fs-fade-out {
     @extend .fs-hide-y-scrollbar;
     
+    padding: var(--fs-fade-out-padding);
+    height: var(--fs-fade-out-height);
     flex-direction: column;
     position: relative;
     display: flex;
@@ -14,8 +16,7 @@
     height: var(--fs-fade-out-top-mask-height);
     min-height: var(--fs-fade-out-top-mask-height);
     width: 100%;
-    top: 0;
-    left: 0;
+    top: var(--fs-fade-out-top-mask-top);
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     background: linear-gradient(to top, transparent 0, var(--fs-fade-out-mask-color) var(--fs-fade-out-top-mask-height));
 }
@@ -28,8 +29,7 @@
     height: var(--fs-fade-out-bottom-mask-height);
     min-height: var(--fs-fade-out-bottom-mask-height);
     width: 100%;
-    bottom: 0;
-    left: 0;
+    bottom: var(--fs-fade-out-bottom-mask-bottom);
     transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     background: linear-gradient(to bottom, transparent 0, var(--fs-fade-out-mask-color) var(--fs-fade-out-bottom-mask-height));
 }