diff --git a/bun.lockb b/bun.lockb index cf0ee45..63ee4c4 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index ec08365..b723abd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bb-component-SuperTableColumn", - "version": "2.0.34-alpha", + "version": "2.0.38-alpha", "description": "Customizable columns for the SuperTable Component", "author": "Michael Poirazi", "license": "MIT", @@ -17,16 +17,16 @@ "svelte-legos": "^0.2.5" }, "devDependencies": { - "@budibase/backend-core": "^2.31.3", - "@budibase/bbui": "^2.31.3", + "@budibase/backend-core": "^2.32.17", + "@budibase/bbui": "^2.32.17", "@budibase/shared-core": "2.11.30", "@rollup/plugin-commonjs": "^25.0.8", "@rollup/plugin-json": "^6.1.0", - "@rollup/plugin-node-resolve": "^15.2.3", + "@rollup/plugin-node-resolve": "^15.3.0", "@rollup/plugin-terser": "^0.4.4", "npm-run-all": "^4.1.5", - "postcss": "^8.4.41", - "rollup": "^2.79.1", + "postcss": "^8.4.47", + "rollup": "^2.79.2", "rollup-plugin-copy2": "^0.3.1", "rollup-plugin-polyfill-node": "^0.8.0", "rollup-plugin-postcss": "^4.0.2", diff --git a/schema.json b/schema.json index 26d2af8..10cfa7f 100644 --- a/schema.json +++ b/schema.json @@ -15,7 +15,7 @@ "type": "text", "key": "field", "label": "Field", - "hidden": true + "hidden": false }, { "type": "select", diff --git a/src/Component.svelte b/src/Component.svelte index 2a925b3..bab664c 100644 --- a/src/Component.svelte +++ b/src/Component.svelte @@ -5,11 +5,10 @@ import SuperTableColumn from "../../bb_super_components_shared/src/lib/SuperTableColumn/SuperTableColumn.svelte"; import { defaultOperatorMap } from "../../bb_super_components_shared/src/lib/SuperTable/constants"; - const { styleable, builderStore, screenStore } = getContext("sdk"); + const { styleable, builderStore, screenStore, memo } = getContext("sdk"); const component = getContext("component"); - const tableOptions = getContext("stbSettings"); + const stbSettings = getContext("stbSettings"); const stbState = getContext("stbState"); - const stbData = getContext("stbData"); export let field; export let columnType; @@ -43,21 +42,26 @@ let id = $component.id; let order, isLast, isFirst; - let columnOptions = {}; - let localField = $tableOptions ? field : "reset_this_column"; + let localField = $stbSettings ? field : "reset_this_column"; + let columnOptions = memo({}); + let optionOverrides = memo($$props); + $: optionOverrides.set($$props); $: inBuilder = $builderStore?.inBuilder; + $: schema = $stbSettings?.data?.schema; // We nned to know the position of the Super Columns amonsgt other siblings // to adjust various properties $: getOrderAmongstSiblings($screenStore); + $: enrichColumnnOptions($stbSettings, field, $optionOverrides); - $: columnOptions = $tableOptions - ? { + const enrichColumnnOptions = () => { + if (field && schema && schema[field]) { + let schema = $stbSettings?.data?.schema; + let type = schema[field].type; + columnOptions.set({ name: field, - schema: - columnType == "auto" ? $stbData?.schema[field] : { type: columnType }, - type: columnType, + schema: columnType == "auto" ? schema[field] : { type: columnType }, align: align, displayName: header ? header : field, asComponent: $builderStore.inBuilder, @@ -66,35 +70,32 @@ fontWeight: fontWeight, header: header ?? "", headerAlign: align, - headerHeight: $tableOptions?.headerHeight, + headerHeight: $stbSettings?.headerHeight, template: valueTemplate, canEdit: - canEdit == "inherit" ? $tableOptions?.features.canEdit : canEdit, - highlighters: $tableOptions?.appearance?.highlighters, + canEdit == "inherit" ? $stbSettings?.features.canEdit : canEdit, + highlighters: $stbSettings?.appearance?.highlighters, canFilter: - canFilter == "inherit" ? $tableOptions.features.canFilter : canFilter, + canFilter == "inherit" ? $stbSettings.features.canFilter : canFilter, canResize: - canResize == "inherit" ? $tableOptions.features.canResize : canResize, - defaultFilteringOperator: field - ? defaultOperatorMap[$stbData?.schema[field]?.type] - : undefined, - canSort: - canSort == "inherit" ? $tableOptions.features.canSort : canSort, + canResize == "inherit" ? $stbSettings.features.canResize : canResize, + defaultFilteringOperator: field ? defaultOperatorMap[type] : undefined, + canSort: canSort == "inherit" ? $stbSettings.features.canSort : canSort, isSorted: - $tableOptions?.sortedColum == field - ? $tableOptions?.sortedDirection + $stbSettings?.sortedColum == field + ? $stbSettings?.sortedDirection : null, - sizing: sizing || $tableOptions?.sizing, - minWidth: minWidth || $tableOptions?.columnMinWidth, - maxWidth: maxWidth || $tableOptions?.columnMaxWidth, - fixedWidth: fixedWidth | $tableOptions?.columnFixedWidth, - showHeader: $tableOptions?.showHeader, - showFooter: $tableOptions?.showFooter, + sizing: sizing || $stbSettings?.sizing, + minWidth: minWidth || $stbSettings?.columnMinWidth, + maxWidth: maxWidth || $stbSettings?.columnMaxWidth, + fixedWidth: fixedWidth | $stbSettings?.columnFixedWidth, + showHeader: $stbSettings?.showHeader, + showFooter: $stbSettings?.showFooter, order: order, isFirst: isFirst, isLast: isLast, superColumn: true, - cellPadding: $tableOptions?.appearance.cellPadding, + cellPadding: $stbSettings?.appearance.cellPadding, optionsSource: columnType != "auto" ? optionsSource : "schema", customOptions, useOptionColors, @@ -106,8 +107,9 @@ labelColumn, valueColumn, }, - } - : {}; + }); + } + }; // When the Super Columns is used as a Component, the sizing variables need to be applied to the wrapping div and not the // SuperColumn itself. @@ -115,9 +117,9 @@ ...$component.styles, normal: { ...$component.styles.normal, - display: inBuilder ? "block" : "contents", + display: inBuilder ? "flex" : "contents", flex: - $tableOptions?.columnSizing == "flexible" && sizing == "flexible" + $stbSettings?.columnSizing == "flexible" && sizing == "flexible" ? flexFactor + " 1 auto" : "0 1 auto", width: @@ -137,9 +139,9 @@ } function getOrderAmongstSiblings() { - if (!tableOptions) return; + if (!stbSettings) return; - let parentTableID = $tableOptions.componentID; + let parentTableID = $stbSettings.componentID; let parentTableObj = findComponentById( $screenStore.activeScreen.props, parentTableID @@ -150,13 +152,18 @@ } const isValid = () => { - let validFields = Object.keys($stbData?.schema ?? {}); + let validFields = Object.keys(schema ?? {}); return field && validFields.includes(field); }; + + $: redraw($component.children); + const redraw = () => { + stbState?.refresh(); + };
- {#if !tableOptions && inBuilder} + {#if !stbSettings && inBuilder}

{:else if !isValid(field) && inBuilder}

- +
{:else if isValid(field)}