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

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/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.27",
   "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.27",
+    "@dative-gpi/foundation-shared-services": "0.0.27",
     "@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": "b46c226b198f482eee4ca6e63ef2923522bf6e8c"
 }

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;
 }