From 42ce9da436f21681c3d2f6f52b5ffeb832fa410a Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Mon, 29 Apr 2024 16:56:36 +0530 Subject: [PATCH 01/13] manual-register manually regitering elements instead of automatic --- .github/workflows/release.yml | 1 - .storybook/preview.ts | 39 +- package.json | 2 +- .../components/f-code-editor/f-code-editor.ts | 3 +- packages/flow-code-editor/vite.config.ts | 16 +- packages/flow-core/package.json | 2 + .../src/components/f-accordion/f-accordion.ts | 4 +- .../components/f-breadcrumb/f-breadcrumb.ts | 3 +- .../src/components/f-button/f-button.ts | 4 +- .../f-carousel-content/f-carousel-content.ts | 3 +- .../src/components/f-carousel/f-carousel.ts | 2 - .../src/components/f-checkbox/f-checkbox.ts | 3 +- .../f-color-picker/f-color-picker.ts | 3 +- .../src/components/f-countdown/f-countdown.ts | 3 +- .../src/components/f-counter/f-counter.ts | 3 +- .../f-date-time-picker/f-date-time-picker.ts | 4 +- .../flow-core/src/components/f-div/f-div.ts | 4 +- .../src/components/f-divider/f-divider.ts | 3 +- .../f-document-viewer/f-document-viewer.ts | 3 +- .../f-emoji-picker/f-emoji-picker.ts | 3 +- .../components/f-field/f-field-global.scss | 2 +- .../src/components/f-field/f-field.scss | 2 +- .../src/components/f-field/f-field.ts | 14 +- .../components/f-file-upload/f-file-upload.ts | 3 +- .../components/f-form-field/f-form-field.ts | 2 - .../components/f-form-group/f-form-group.ts | 3 +- .../flow-core/src/components/f-form/f-form.ts | 7 +- .../flow-core/src/components/f-grid/f-grid.ts | 3 +- .../components/f-icon-button/f-icon-button.ts | 20 +- .../flow-core/src/components/f-icon/f-icon.ts | 8 +- .../src/components/f-input/f-input-light.ts | 44 +- .../src/components/f-input/f-input.ts | 13 +- .../src/components/f-pictogram/f-pictogram.ts | 20 +- .../src/components/f-popover/f-popover.ts | 4 +- .../f-progress-bar/f-progress-bar.ts | 14 +- .../src/components/f-radio/f-radio.ts | 3 +- .../src/components/f-search/f-search.ts | 3 +- .../src/components/f-select/f-select.ts | 5 +- .../src/components/f-spacer/f-spacer.ts | 3 +- .../src/components/f-suggest/f-suggest.ts | 3 +- .../src/components/f-switch/f-switch.ts | 5 +- .../components/f-tab-content/f-tab-content.ts | 3 +- .../src/components/f-tab-node/f-tab-node.ts | 3 +- .../flow-core/src/components/f-tab/f-tab.ts | 3 +- .../flow-core/src/components/f-tag/f-tag.ts | 4 +- .../src/components/f-template/f-template.ts | 3 +- .../src/components/f-text-area/f-text-area.ts | 7 +- .../flow-core/src/components/f-text/f-text.ts | 4 +- .../src/components/f-toast/f-toast.ts | 3 +- .../src/components/f-tooltip/f-tooltip.ts | 3 +- packages/flow-core/src/index.ts | 101 +++ packages/flow-core/vite.config.ts | 18 +- packages/flow-dashboard/.npmignore | 8 - packages/flow-dashboard/CHANGELOG.md | 13 - packages/flow-dashboard/LICENSE | 21 - packages/flow-dashboard/README.md | 60 -- packages/flow-dashboard/compile.sh | 12 - packages/flow-dashboard/package.json | 67 -- .../f-dashboard/f-dashboard-global.scss | 46 -- .../f-dashboard/f-dashboard-utils.ts | 62 -- .../src/components/f-dashboard/f-dashboard.ts | 108 --- .../f-timeseries-chart-global.scss | 110 --- .../f-timeseries-chart-types.ts | 99 --- .../f-timeseries-chart-utils.ts | 54 -- .../f-timeseries-chart.test.ts | 18 - .../f-timeseries-chart/f-timeseries-chart.ts | 713 ------------------ packages/flow-dashboard/src/index.ts | 4 - packages/flow-dashboard/src/types.ts | 36 - packages/flow-dashboard/tsconfig.json | 7 - packages/flow-dashboard/vite.config.ts | 27 - packages/flow-dashboard/vite.umd.config.ts | 17 - .../flow-dashboard/web-test-runner.config.mjs | 5 - .../f-checkbox-group/f-checkbox-group.ts | 2 +- .../f-field-separator/f-field-separator.ts | 1 - .../components/f-form-array/f-form-array.ts | 2 +- .../f-form-builder/f-form-builder.ts | 1 - .../components/f-form-object/f-form-object.ts | 2 +- .../components/f-radio-group/f-radio-group.ts | 2 +- packages/flow-form-builder/src/index.ts | 16 + packages/flow-form-builder/vite.config.ts | 15 +- .../src/components/f-lineage/f-lineage.ts | 1 - packages/flow-lineage/vite.config.ts | 16 +- .../flow-log/src/components/f-log/f-log.ts | 3 +- packages/flow-log/vite.config.ts | 15 +- .../src/components/f-md-editor/f-md-editor.ts | 4 +- packages/flow-md-editor/vite.config.ts | 17 +- .../f-table-schema/f-table-schema.ts | 3 +- .../src/components/f-table/f-table.ts | 3 +- .../src/components/f-tcell/f-tcell.ts | 3 +- .../src/components/f-trow/f-trow.ts | 3 +- packages/flow-table/src/index.ts | 7 + packages/flow-table/vite.config.ts | 15 +- pnpm-lock.yaml | 167 ++-- stories/flow-dashboard/f-dashboard.stories.ts | 134 ---- .../f-timeseries-chart.stories.ts | 395 ---------- stories/flow-dashboard/mock-data-utils.ts | 63 -- tsconfig.json | 3 - 97 files changed, 484 insertions(+), 2337 deletions(-) delete mode 100644 packages/flow-dashboard/.npmignore delete mode 100644 packages/flow-dashboard/CHANGELOG.md delete mode 100644 packages/flow-dashboard/LICENSE delete mode 100644 packages/flow-dashboard/README.md delete mode 100644 packages/flow-dashboard/compile.sh delete mode 100644 packages/flow-dashboard/package.json delete mode 100644 packages/flow-dashboard/src/components/f-dashboard/f-dashboard-global.scss delete mode 100644 packages/flow-dashboard/src/components/f-dashboard/f-dashboard-utils.ts delete mode 100644 packages/flow-dashboard/src/components/f-dashboard/f-dashboard.ts delete mode 100644 packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart-global.scss delete mode 100644 packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart-types.ts delete mode 100644 packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart-utils.ts delete mode 100644 packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart.test.ts delete mode 100644 packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart.ts delete mode 100644 packages/flow-dashboard/src/index.ts delete mode 100644 packages/flow-dashboard/src/types.ts delete mode 100644 packages/flow-dashboard/tsconfig.json delete mode 100644 packages/flow-dashboard/vite.config.ts delete mode 100644 packages/flow-dashboard/vite.umd.config.ts delete mode 100644 packages/flow-dashboard/web-test-runner.config.mjs delete mode 100644 stories/flow-dashboard/f-dashboard.stories.ts delete mode 100644 stories/flow-dashboard/f-timeseries-chart.stories.ts delete mode 100644 stories/flow-dashboard/mock-data-utils.ts diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index c5921ee37..7ad647bf5 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -52,7 +52,6 @@ jobs: "@ollion/flow-core-config":"packages/flow-core-config/CHANGELOG.md", "@ollion/flow-form-builder":"packages/flow-form-builder/CHANGELOG.md", "@ollion/flow-lineage":"packages/flow-lineage/CHANGELOG.md", - "@ollion/flow-dashboard":"packages/flow-dashboard/CHANGELOG.md", "@ollion/custom-elements-manifest-to-types":"packages/custom-elements-manifest-to-types/CHANGELOG.md" } diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 66a216a1a..d27f296a9 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -6,14 +6,24 @@ import AwsIconPack from "@ollion/flow-aws-icon/dist/types/icon-pack"; import { ConfigUtil } from "@ollion/flow-core-config"; import { changeRoute } from "./utils"; -import "@ollion/flow-core"; -import "@ollion/flow-log"; -import "@ollion/flow-code-editor"; -import "@ollion/flow-table"; -import "@ollion/flow-md-editor"; -import "@ollion/flow-form-builder"; -import "@ollion/flow-lineage"; -import "@ollion/flow-dashboard"; +import { register, flowCoreElements } from "@ollion/flow-core"; + +import { FLog } from "@ollion/flow-log"; +import { FCodeEditor } from "@ollion/flow-code-editor"; +import { flowTableElements } from "@ollion/flow-table"; +import { FMDEditor } from "@ollion/flow-md-editor"; +import { flowFormBuilderElements } from "@ollion/flow-form-builder"; +import { FLineage } from "@ollion/flow-lineage"; + +register([ + ...flowCoreElements, + ...flowTableElements, + ...flowFormBuilderElements, + FLog, + FCodeEditor, + FMDEditor, + FLineage +]); import { setCustomElementsManifest, setCustomElements } from "@storybook/web-components"; import { themes } from "@storybook/theming"; @@ -126,9 +136,6 @@ async function run() { const tableCustomElements = await ( await fetch(new URL("../packages/flow-table/custom-elements.json", import.meta.url)) ).json(); - const dashboardCustomElements = await ( - await fetch(new URL("../packages/flow-dashboard/custom-elements.json", import.meta.url)) - ).json(); const mdEditorCustomElements = await ( await fetch(new URL("../packages/flow-md-editor/custom-elements.json", import.meta.url)) @@ -146,16 +153,14 @@ async function run() { setCustomElementsManifest(mdEditorCustomElements); setCustomElements(mdEditorCustomElements); - setCustomElementsManifest(dashboardCustomElements); - setCustomElements(dashboardCustomElements); } run(); // 404 error state --start-- -const el = document.body.querySelector(".sb-errordisplay.sb-wrapper"); -const errorMessage = el.querySelector("#error-message.sb-heading"); -const codeMessage = el.querySelector(".sb-errordisplay_code"); +const el = document.body.querySelector(".sb-errordisplay.sb-wrapper")!; +const errorMessage = el.querySelector("#error-message.sb-heading")!; +const codeMessage = el.querySelector(".sb-errordisplay_code")!; const url = new URL(window.location.href); const url_id = url.searchParams.get("id"); @@ -184,7 +189,7 @@ if (el) { el?.insertAdjacentHTML("afterbegin", paraDefine); codeMessage.style.display = "none"; errorMessage.style.display = "none"; - const homeButton = el.querySelector("#home-button"); + const homeButton = el.querySelector("#home-button")!; homeButton.addEventListener("click", changePath); } diff --git a/package.json b/package.json index ed573845c..e3b61d346 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "@ollion/flow-aws-icon": "latest", "@ollion/flow-code-editor": "workspace:*", "@ollion/flow-core": "workspace:*", - "@ollion/flow-dashboard": "workspace:*", + "@ollion/flow-core-config": "workspace:*", "@ollion/flow-form-builder": "workspace:*", "@ollion/flow-gcp-icon": "latest", "@ollion/flow-lineage": "workspace:*", diff --git a/packages/flow-code-editor/src/components/f-code-editor/f-code-editor.ts b/packages/flow-code-editor/src/components/f-code-editor/f-code-editor.ts index f38483c30..45a42afb6 100644 --- a/packages/flow-code-editor/src/components/f-code-editor/f-code-editor.ts +++ b/packages/flow-code-editor/src/components/f-code-editor/f-code-editor.ts @@ -1,5 +1,5 @@ import { html, PropertyValueMap, unsafeCSS } from "lit"; -import { FRoot, flowElement, FButton } from "@ollion/flow-core"; +import { FRoot, FButton } from "@ollion/flow-core"; import globalStyle from "./f-code-editor-global.scss?inline"; import * as monaco from "monaco-editor"; @@ -26,7 +26,6 @@ export type FCodeEditorServices = monaco.editor.IStandaloneEditorConstructionOpt export type FCodeEditorStateProp = "subtle" | "default" | "secondary"; -@flowElement("f-code-editor") export class FCodeEditor extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-code-editor/vite.config.ts b/packages/flow-code-editor/vite.config.ts index 5bdb9d3f5..71363417f 100644 --- a/packages/flow-code-editor/vite.config.ts +++ b/packages/flow-code-editor/vite.config.ts @@ -16,7 +16,21 @@ export default defineConfig({ // If we want to publish standalone components we don't externalize lit, // if you are going to use lit in your own project, you can make it a dep instead. // external: /^lit/, <-- comment this line - external: ["@ollion/flow-core-config", "@ollion/flow-core", /^lit/, "monaco-editor"], + external: [ + /^@ollion/, + "axios", + "emoji-mart", + "lodash-es", + /^lit/, + "rxjs", + "vanilla-colorful", + "mark.js", + "@emoji-mart/data", + "@lit-labs/virtualizer", + "flatpickr", + "@floating-ui/dom", + "monaco-editor" + ], output: { globals: { "@ollion/flow-core": "@ollion/flow-core" diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json index 8994936a9..d3aada947 100644 --- a/packages/flow-core/package.json +++ b/packages/flow-core/package.json @@ -40,6 +40,7 @@ "devDependencies": { "@custom-elements-manifest/analyzer": "^0.8.1", "@open-wc/testing": "^3.1.5", + "@rollup/plugin-terser": "^0.4.4", "@types/jest": "29.5.5", "@types/lodash-es": "^4.17.6", "@types/mark.js": "^8.11.12", @@ -51,6 +52,7 @@ "fs-extra": "^11.1.1", "lit-html": "^3.1.0", "prettier": "2.6.2", + "rollup-plugin-visualizer": "^5.12.0", "sass": "^1.52.3", "typescript": "^5.2.2", "vite": "^4.4.11", diff --git a/packages/flow-core/src/components/f-accordion/f-accordion.ts b/packages/flow-core/src/components/f-accordion/f-accordion.ts index 125d1698f..21012df27 100644 --- a/packages/flow-core/src/components/f-accordion/f-accordion.ts +++ b/packages/flow-core/src/components/f-accordion/f-accordion.ts @@ -4,7 +4,7 @@ import eleStyle from "./f-accordion.scss?inline"; import globalStyle from "./f-accordion-global.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; import { FDiv, FDivPaddingProp } from "../f-div/f-div"; -import { flowElement, generateId } from "./../../utils"; +import { generateId } from "./../../utils"; import { injectCss } from "@ollion/flow-core-config"; injectCss("f-accordion", globalStyle); @@ -16,7 +16,7 @@ export type FAccordionCustomEvent = { }; export type FAccordionPadding = FDivPaddingProp; -@flowElement("f-accordion") + export class FAccordion extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts index 227868ed1..ba178db44 100644 --- a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts +++ b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts @@ -4,7 +4,7 @@ import eleStyle from "./f-breadcrumb.scss?inline"; import globalStyle from "./f-breadcrumb-global.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; import { FDiv } from "../f-div/f-div"; -import { flowElement } from "../../utils"; + import { FText } from "../f-text/f-text"; import { FPopover } from "../f-popover/f-popover"; @@ -20,7 +20,6 @@ export type FBreadcrumbs = FBreadCrumbsProp[]; export type FBreadcrumbSize = (typeof sizes)[number]; export type FBreadcrumbVariant = (typeof variants)[number]; -@flowElement("f-breadcrumb") export class FBreadcrumb extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-button/f-button.ts b/packages/flow-core/src/components/f-button/f-button.ts index 8d098c98e..f9f95138d 100644 --- a/packages/flow-core/src/components/f-button/f-button.ts +++ b/packages/flow-core/src/components/f-button/f-button.ts @@ -13,7 +13,7 @@ import getCustomFillColor from "../../utils/get-custom-fill-color"; import getTextContrast from "../../utils/get-text-contrast"; import { FIcon } from "../f-icon/f-icon"; import { FCounter } from "../f-counter/f-counter"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; export type FButtonState = @@ -30,7 +30,7 @@ injectCss("f-button", globalStyle); /** * @summary Buttons allow users to perform an action or to initiate a new function. */ -@flowElement("f-button") + export class FButton extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-carousel-content/f-carousel-content.ts b/packages/flow-core/src/components/f-carousel-content/f-carousel-content.ts index c3cb470e0..b96071895 100644 --- a/packages/flow-core/src/components/f-carousel-content/f-carousel-content.ts +++ b/packages/flow-core/src/components/f-carousel-content/f-carousel-content.ts @@ -3,12 +3,11 @@ import { property } from "lit/decorators.js"; import { FRoot } from "./../../mixins/components/f-root/f-root"; import globalStyle from "./f-carousel-content-global.scss?inline"; import { FDiv } from "../f-div/f-div"; -import { flowElement } from "./../../utils"; import { injectCss } from "@ollion/flow-core-config"; injectCss("f-carousel-content", globalStyle); -@flowElement("f-carousel-content") + export class FCarouselContent extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-carousel/f-carousel.ts b/packages/flow-core/src/components/f-carousel/f-carousel.ts index 76947089c..bd94e7b55 100644 --- a/packages/flow-core/src/components/f-carousel/f-carousel.ts +++ b/packages/flow-core/src/components/f-carousel/f-carousel.ts @@ -6,13 +6,11 @@ import globalStyle from "./f-carousel-global.scss?inline"; import { FDiv } from "../f-div/f-div"; import { FCarouselContent } from "../f-carousel-content/f-carousel-content"; import { FIcon } from "../f-icon/f-icon"; -import { flowElement } from "./../../utils"; import { injectCss } from "@ollion/flow-core-config"; injectCss("f-carousel", globalStyle); -@flowElement("f-carousel") export class FCarousel extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-checkbox/f-checkbox.ts b/packages/flow-core/src/components/f-checkbox/f-checkbox.ts index ea7362fdc..1671dfd2f 100644 --- a/packages/flow-core/src/components/f-checkbox/f-checkbox.ts +++ b/packages/flow-core/src/components/f-checkbox/f-checkbox.ts @@ -7,7 +7,7 @@ import { unsafeSVG } from "lit-html/directives/unsafe-svg.js"; import checkedMark from "../../mixins/svg/checked-mark"; import indeterminateMark from "../../mixins/svg/indeterminate-mark"; import { FDiv } from "../f-div/f-div"; -import { flowElement, generateId } from "./../../utils"; +import { generateId } from "./../../utils"; import { injectCss } from "@ollion/flow-core-config"; @@ -18,7 +18,6 @@ export type FCheckboxCustomEvent = { value: string; }; -@flowElement("f-checkbox") export class FCheckbox extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-color-picker/f-color-picker.ts b/packages/flow-core/src/components/f-color-picker/f-color-picker.ts index 8b505e5e7..1c5ce14ea 100644 --- a/packages/flow-core/src/components/f-color-picker/f-color-picker.ts +++ b/packages/flow-core/src/components/f-color-picker/f-color-picker.ts @@ -3,7 +3,7 @@ import { property, query, state } from "lit/decorators.js"; import globalStyle from "./f-color-picker-global.scss?inline"; import eleStyle from "./f-color-picker.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; import "vanilla-colorful"; @@ -19,7 +19,6 @@ export type FColorPickerInputEvent = { value?: string; }; -@flowElement("f-color-picker") export class FColorPicker extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-countdown/f-countdown.ts b/packages/flow-core/src/components/f-countdown/f-countdown.ts index e58a0ba43..471ebcda4 100644 --- a/packages/flow-core/src/components/f-countdown/f-countdown.ts +++ b/packages/flow-core/src/components/f-countdown/f-countdown.ts @@ -3,7 +3,7 @@ import { property } from "lit/decorators.js"; import eleStyle from "./f-countdown.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; import { FDiv } from "../f-div/f-div"; -import { flowElement } from "../../utils"; + import getCustomFillColor from "../../utils/get-custom-fill-color"; import { ref, createRef, Ref } from "lit/directives/ref.js"; import { FText } from "../f-text/f-text"; @@ -22,7 +22,6 @@ export type FCountdownSizesProp = (typeof sizes)[number]; export type FCountdownLabelProp = (typeof placements)[number]; export type FCountdownDuration = number | string; -@flowElement("f-countdown") export class FCountdown extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-counter/f-counter.ts b/packages/flow-core/src/components/f-counter/f-counter.ts index 20c0cb26a..7f23b4630 100644 --- a/packages/flow-core/src/components/f-counter/f-counter.ts +++ b/packages/flow-core/src/components/f-counter/f-counter.ts @@ -10,7 +10,7 @@ import getTextContrast from "../../utils/get-text-contrast"; import getCustomFillColor from "../../utils/get-custom-fill-color"; import { validateHTMLColor } from "validate-color"; import { validateHTMLColorName } from "validate-color"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -25,7 +25,6 @@ export type FCounterStateProp = | "inherit" | `custom, ${string}`; -@flowElement("f-counter") export class FCounter extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts index e5c42dd4c..a04d508ca 100644 --- a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts +++ b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts @@ -9,7 +9,6 @@ import { DateLimit, DateOption } from "flatpickr/dist/types/options"; import { FInput } from "../f-input/f-input"; import { FDiv } from "../f-div/f-div"; import { FText } from "../f-text/f-text"; -import { flowElement } from "./../../utils"; import { injectCss } from "@ollion/flow-core-config"; import { ifDefined } from "lit-html/directives/if-defined.js"; @@ -24,7 +23,6 @@ export type DateDisableType = DateLimit[]; export type FDateOption = DateOption; -@flowElement("f-date-time-picker") export class FDateTimePicker extends FRoot { /** * css loaded from scss file @@ -88,7 +86,7 @@ export class FDateTimePicker extends FRoot { /** * @attribute Sets the maximum value of the date allowed in the picker */ - @property({ reflect: true, type: Date }) + @property({ reflect: true, attribute: false }) ["max-date"]?: FDateOption; /** diff --git a/packages/flow-core/src/components/f-div/f-div.ts b/packages/flow-core/src/components/f-div/f-div.ts index f70e10a60..141722d35 100644 --- a/packages/flow-core/src/components/f-div/f-div.ts +++ b/packages/flow-core/src/components/f-div/f-div.ts @@ -6,7 +6,7 @@ import globalStyle from "./f-div-global.scss?inline"; import { unsafeSVG } from "lit-html/directives/unsafe-svg.js"; import loader from "../../mixins/svg/loader"; import getCustomFillColor from "../../utils/get-custom-fill-color"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; export type FDivBorderWidth = "small" | "medium" | "large"; @@ -104,7 +104,7 @@ injectCss("f-div", globalStyle); /** * @summary F-div is used as a container for HTML elements. */ -@flowElement("f-div") + export class FDiv extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-divider/f-divider.ts b/packages/flow-core/src/components/f-divider/f-divider.ts index e264605ff..138b5cd68 100644 --- a/packages/flow-core/src/components/f-divider/f-divider.ts +++ b/packages/flow-core/src/components/f-divider/f-divider.ts @@ -5,13 +5,12 @@ import { FRoot } from "../../mixins/components/f-root/f-root"; import getCustomFillColor from "../../utils/get-custom-fill-color"; import { validateHTMLColor } from "validate-color"; import { validateHTMLColorName } from "validate-color"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; injectCss("f-divider", globalStyle); export type FDividerState = "default" | "secondary" | "subtle" | `custom, ${string}`; -@flowElement("f-divider") export class FDivider extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-document-viewer/f-document-viewer.ts b/packages/flow-core/src/components/f-document-viewer/f-document-viewer.ts index 1b6111ec0..2d50da3de 100644 --- a/packages/flow-core/src/components/f-document-viewer/f-document-viewer.ts +++ b/packages/flow-core/src/components/f-document-viewer/f-document-viewer.ts @@ -4,7 +4,7 @@ import eleStyle from "./f-document-viewer.scss?inline"; import globalStyle from "./f-document-viewer-global.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; import { FDiv } from "../f-div/f-div"; -import { flowElement } from "../../utils"; + import { injectCss } from "@ollion/flow-core-config"; import { FText } from "../f-text/f-text"; import { FAccordion } from "../f-accordion/f-accordion"; @@ -42,7 +42,6 @@ export type FDocumentStatement = { export type FDocViewerContent = Record; -@flowElement("f-document-viewer") export class FDocumentViewer extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts b/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts index e7303d146..ff240d8c7 100644 --- a/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts +++ b/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts @@ -9,7 +9,7 @@ import { FDiv } from "../f-div/f-div"; import { FText } from "../f-text/f-text"; import { FIcon } from "../f-icon/f-icon"; import { FPopover } from "../f-popover/f-popover"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; injectCss("f-emoji-picker", globalStyle); @@ -56,7 +56,6 @@ export type FEmojiPickerCustomEmojiData = FEmojiPickerCustomEmoji[]; export type RecentEmojis = string[]; export type ExcludeEmojis = string[]; -@flowElement("f-emoji-picker") export class FEmojiPicker extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-field/f-field-global.scss b/packages/flow-core/src/components/f-field/f-field-global.scss index 2654383ac..66dcf996a 100644 --- a/packages/flow-core/src/components/f-field/f-field-global.scss +++ b/packages/flow-core/src/components/f-field/f-field-global.scss @@ -2,7 +2,7 @@ f-field { width: 100%; - &[variant="inline"] { + &[data-variant="inline"] { flex: 0 0 auto; width: fit-content; } diff --git a/packages/flow-core/src/components/f-field/f-field.scss b/packages/flow-core/src/components/f-field/f-field.scss index c96f9cdf6..bf66d3d4f 100644 --- a/packages/flow-core/src/components/f-field/f-field.scss +++ b/packages/flow-core/src/components/f-field/f-field.scss @@ -55,7 +55,7 @@ $sizes: ( } } - &[variant="inline"] { + &[data-variant="inline"] { display: inline-flex; flex-direction: row; width: fit-content; diff --git a/packages/flow-core/src/components/f-field/f-field.ts b/packages/flow-core/src/components/f-field/f-field.ts index 5140982c6..c22de3a0d 100644 --- a/packages/flow-core/src/components/f-field/f-field.ts +++ b/packages/flow-core/src/components/f-field/f-field.ts @@ -5,15 +5,16 @@ import { FDiv } from "../f-div/f-div"; import { FText } from "../f-text/f-text"; import eleStyle from "./f-field.scss?inline"; import globalStyle from "./f-field-global.scss?inline"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; +import { ifDefined } from "lit/directives/if-defined.js"; injectCss("f-field", globalStyle); export type FFieldStateProp = "default" | "primary" | "success" | "danger" | "warning"; /** * @summary Text component includes Headings, titles, body texts and links. */ -@flowElement("f-field") + export class FField extends FRoot { /** * css loaded from scss file @@ -77,8 +78,13 @@ export class FField extends FRoot { direction="column" class="f-field-wrapper" gap="small" - variant=${this.variant} - >
+ data-variant=${ifDefined(this.variant)} + >
${this.description diff --git a/packages/flow-core/src/components/f-file-upload/f-file-upload.ts b/packages/flow-core/src/components/f-file-upload/f-file-upload.ts index ab25424ac..adade3fe7 100644 --- a/packages/flow-core/src/components/f-file-upload/f-file-upload.ts +++ b/packages/flow-core/src/components/f-file-upload/f-file-upload.ts @@ -10,7 +10,7 @@ import { FIcon } from "../f-icon/f-icon"; import { getExtensionsFromMimeType, getFormattedBytes } from "../../utils/index"; import { unsafeSVG } from "lit-html/directives/unsafe-svg.js"; import loader from "../../mixins/svg/loader"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; import { ifDefined } from "lit/directives/if-defined.js"; injectCss("f-file-upload", globalStyle); @@ -29,7 +29,6 @@ export type FFileUploadSizeProp = | `${number} GB` | `${number} TB`; -@flowElement("f-file-upload") export class FFileUpload extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-form-field/f-form-field.ts b/packages/flow-core/src/components/f-form-field/f-form-field.ts index f181bddd1..0fe05964f 100644 --- a/packages/flow-core/src/components/f-form-field/f-form-field.ts +++ b/packages/flow-core/src/components/f-form-field/f-form-field.ts @@ -2,9 +2,7 @@ import { html } from "lit"; import { FRoot } from "../../mixins/components/f-root/f-root"; import { FDiv } from "../f-div/f-div"; -import { flowElement } from "./../../utils"; -@flowElement("f-form-field") export class FFormField extends FRoot { static styles = [...FDiv.styles]; render() { diff --git a/packages/flow-core/src/components/f-form-group/f-form-group.ts b/packages/flow-core/src/components/f-form-group/f-form-group.ts index fe7b1dd1b..cba15dfa1 100644 --- a/packages/flow-core/src/components/f-form-group/f-form-group.ts +++ b/packages/flow-core/src/components/f-form-group/f-form-group.ts @@ -5,7 +5,6 @@ import { FDiv } from "../f-div/f-div"; import { FText } from "../f-text/f-text"; import eleStyle from "./f-form-group.scss?inline"; import globalStyle from "./f-form-group-global.scss?inline"; -import { flowElement } from "./../../utils"; import { injectCss } from "@ollion/flow-core-config"; import { ifDefined } from "lit-html/directives/if-defined.js"; @@ -20,7 +19,7 @@ export type FGroupLabel = { /** * @summary Text component includes Headings, titles, body texts and links. */ -@flowElement("f-form-group") + export class FFormGroup extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-form/f-form.ts b/packages/flow-core/src/components/f-form/f-form.ts index 4c3679c7a..ce7d373b5 100644 --- a/packages/flow-core/src/components/f-form/f-form.ts +++ b/packages/flow-core/src/components/f-form/f-form.ts @@ -5,8 +5,9 @@ import { FText } from "../f-text/f-text"; import eleStyle from "./f-form.scss?inline"; import globalStyle from "./f-form-global.scss?inline"; import { FDiv } from "../f-div/f-div"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; +import { ifDefined } from "lit/directives/if-defined.js"; injectCss("f-form", globalStyle); // import { ref, createRef } from "lit/directives/ref.js"; @@ -14,7 +15,7 @@ injectCss("f-form", globalStyle); /** * @summary Text component includes Headings, titles, body texts and links. */ -@flowElement("f-form") + export class FForm extends FRoot { /** * css loaded from scss file @@ -38,7 +39,7 @@ export class FForm extends FRoot { * Final html to render */ return html` -
+
`; diff --git a/packages/flow-core/src/components/f-grid/f-grid.ts b/packages/flow-core/src/components/f-grid/f-grid.ts index 3138e0a06..02b3dce0c 100644 --- a/packages/flow-core/src/components/f-grid/f-grid.ts +++ b/packages/flow-core/src/components/f-grid/f-grid.ts @@ -3,13 +3,12 @@ import { property } from "lit/decorators.js"; import globalStyle from "./f-grid-global.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; import { FDiv } from "../f-div/f-div"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; injectCss("f-grid", globalStyle); export type FGridBodyHeightProp = `${number}px` | `${number}%` | `${number}vh`; -@flowElement("f-grid") export class FGrid extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts index bd65fb410..157667d8f 100644 --- a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts +++ b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts @@ -13,8 +13,9 @@ import { validateHTMLColor } from "validate-color"; import getTextContrast from "../../utils/get-text-contrast"; import getCustomFillColor from "../../utils/get-custom-fill-color"; import LightenDarkenColor from "../../utils/get-lighten-darken-color"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; +import { ifDefined } from "lit/directives/if-defined.js"; injectCss("f-icon-button", globalStyle); const variants = ["round", "curved", "block"] as const; @@ -33,7 +34,6 @@ export type FIconButtonState = | "inherit" | `custom, ${string}`; -@flowElement("f-icon-button") export class FIconButton extends FRoot { /** * css loaded from scss file @@ -84,7 +84,7 @@ export class FIconButton extends FRoot { /** * @attribute Counter property enables a counter on the button. */ - @property({ reflect: true, type: Number }) + @property({ reflect: true, type: String }) counter?: string; /** @@ -245,7 +245,7 @@ export class FIconButton extends FRoot { ? html`` : ""; @@ -269,17 +269,17 @@ export class FIconButton extends FRoot { return html` ${this.loading ? unsafeSVG(loader) : ""} ${unsafeSVG(loader)}
`; + loadingIcon = html`
+ ${unsafeSVG(loader)} +
`; } return html`
${this.passwordToggle}${clearIcon}${computedSuffix} @@ -164,32 +165,35 @@ export class FInputLight extends FInputBase { /** * Final html to render */ + return html`
${this.prefixTemplate} ${this.suffixTemplate} diff --git a/packages/flow-core/src/components/f-input/f-input.ts b/packages/flow-core/src/components/f-input/f-input.ts index b0bbdcc44..1a5b5ec64 100644 --- a/packages/flow-core/src/components/f-input/f-input.ts +++ b/packages/flow-core/src/components/f-input/f-input.ts @@ -4,8 +4,8 @@ import globalStyle from "./f-input-global.scss?inline"; import { FText } from "../f-text/f-text"; import { FDiv } from "../f-div/f-div"; import { FIcon } from "../f-icon/f-icon"; -import { ifDefined } from "lit-html/directives/if-defined.js"; -import { flowElement } from "./../../utils"; +import { ifDefined } from "lit/directives/if-defined.js"; + import { injectCss } from "@ollion/flow-core-config"; import { FInputBase, FInputCustomEvent } from "./f-input-base"; import { FInputLight } from "./f-input-light"; @@ -13,7 +13,6 @@ injectCss("f-input", globalStyle); export type { FInputState, FInputCustomEvent, FInputSuffixWhen } from "./f-input-base"; -@flowElement("f-input") export class FInput extends FInputBase { /** * css loaded from scss file @@ -143,10 +142,10 @@ export class FInput extends FInputBase { .loading=${this.loading} .clear=${this.clear} .suffixWhen=${this.suffixWhen} - aria-label="${this.getAttribute("aria-label")}" - data-qa-element-id=${this.getAttribute("data-qa-element-id")} - autofocus=${ifDefined(this.getAttribute("autofocus"))} - autocomplete=${ifDefined(this.getAttribute("autocomplete"))} + aria-label="${ifDefined(this.getAttribute("aria-label") ?? undefined)}" + data-qa-element-id=${ifDefined(this.getAttribute("data-qa-element-id") ?? undefined)} + .autofocus=${Boolean(this.getAttribute("autofocus"))} + autocomplete=${ifDefined(this.getAttribute("autocomplete") ?? undefined)} .maxLength=${this.maxLength} @input=${(e: CustomEvent) => this.updateValue(e)} > diff --git a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts index ae9fefaab..e2d8ac38a 100644 --- a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts +++ b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts @@ -7,7 +7,8 @@ import { ConfigUtil, injectCss } from "@ollion/flow-core-config"; import { getTextContrast, isValidHttpUrl } from "./../../utils"; import { classMap } from "lit-html/directives/class-map.js"; import { FIcon } from "../f-icon/f-icon"; -import { flowElement } from "./../../utils"; +import { ifDefined } from "lit/directives/if-defined.js"; + injectCss("f-pictogram", globalStyle); const variants = ["circle", "square", "hexagon", "squircle"] as const; @@ -46,7 +47,6 @@ function generateHslaColors(saturation: number, lightness: number, alpha: number colors = generateHslaColors(50, 60, 1.0, 10); -@flowElement("f-pictogram") export class FPictogram extends FRoot { /** * css loaded from scss file @@ -178,7 +178,7 @@ export class FPictogram extends FRoot { const svg = IconPack[this.source]; if (svg) { return html` + return html`

${this.textSource}

`; } @@ -279,10 +283,10 @@ export class FPictogram extends FRoot { return html`
- + `; @@ -204,7 +208,7 @@ export class FProgressBar extends FRoot { this.valueInNumber > 50 ? 1 : 2, html`
` ); diff --git a/packages/flow-core/src/components/f-radio/f-radio.ts b/packages/flow-core/src/components/f-radio/f-radio.ts index 461c3733a..da16681c3 100644 --- a/packages/flow-core/src/components/f-radio/f-radio.ts +++ b/packages/flow-core/src/components/f-radio/f-radio.ts @@ -4,7 +4,7 @@ import eleStyle from "./f-radio.scss?inline"; import globalStyle from "./f-radio-global.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; import { FDiv } from "../f-div/f-div"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; injectCss("f-radio", globalStyle); @@ -13,7 +13,6 @@ export type FRadioCustomEvent = { value: string; }; -@flowElement("f-radio") export class FRadio extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-search/f-search.ts b/packages/flow-core/src/components/f-search/f-search.ts index 62654cdc9..4e328b8e0 100644 --- a/packages/flow-core/src/components/f-search/f-search.ts +++ b/packages/flow-core/src/components/f-search/f-search.ts @@ -8,7 +8,7 @@ import { FDiv } from "../f-div/f-div"; import { FSelect } from "../f-select/f-select"; import { FSuggest } from "../f-suggest/f-suggest"; import { FIconButton } from "../f-icon-button/f-icon-button"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; import { ifDefined } from "lit-html/directives/if-defined.js"; injectCss("f-search", globalStyle); @@ -38,7 +38,6 @@ export type FSearchSuggestions = string[] | FSearchSuggestionsCategory | FSearch export type FSearchScope = string[] | "none"; -@flowElement("f-search") export class FSearch extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-select/f-select.ts b/packages/flow-core/src/components/f-select/f-select.ts index 5eca14dfc..8ad414b74 100644 --- a/packages/flow-core/src/components/f-select/f-select.ts +++ b/packages/flow-core/src/components/f-select/f-select.ts @@ -29,7 +29,7 @@ import { handleOptionMouseOver } from "./handlers"; import { FIconButton } from "../f-icon-button/f-icon-button"; -import { flowElement, generateId } from "./../../utils"; +import { generateId } from "./../../utils"; import { injectCss } from "@ollion/flow-core-config"; injectCss("f-select", globalStyle); @@ -68,7 +68,6 @@ export type FSelectCreateOptionEvent = { export type FSelectMaxOptionsWidth = `${number}px`; -@flowElement("f-select") export class FSelect extends FRoot { /** * css loaded from scss file @@ -215,7 +214,7 @@ export class FSelect extends FRoot { /** * @attribute height of `f-select` */ - @property({ type: String, reflect: true }) + @property({ type: Number, reflect: true }) height: FSelectHeightProp = 180; /** diff --git a/packages/flow-core/src/components/f-spacer/f-spacer.ts b/packages/flow-core/src/components/f-spacer/f-spacer.ts index a1af4ee94..2004d8020 100644 --- a/packages/flow-core/src/components/f-spacer/f-spacer.ts +++ b/packages/flow-core/src/components/f-spacer/f-spacer.ts @@ -2,7 +2,7 @@ import { html, unsafeCSS } from "lit"; import { property } from "lit/decorators.js"; import globalStyle from "./f-spacer-global.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; injectCss("f-spacer", globalStyle); @@ -17,7 +17,6 @@ export type FSpacerSizeProp = | `${number}%` | `${number}vw`; -@flowElement("f-spacer") export class FSpacer extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-suggest/f-suggest.ts b/packages/flow-core/src/components/f-suggest/f-suggest.ts index 6204f31c5..dd8dc7166 100644 --- a/packages/flow-core/src/components/f-suggest/f-suggest.ts +++ b/packages/flow-core/src/components/f-suggest/f-suggest.ts @@ -10,7 +10,7 @@ import { FInput } from "../f-input/f-input"; import { ifDefined } from "lit-html/directives/if-defined.js"; import { classMap } from "lit-html/directives/class-map.js"; import { cloneDeep } from "lodash-es"; -import { flowElement } from "./../../utils"; + import { displayCustomTemplate, displayOptions, displayCategories } from "./display-options"; import { injectCss } from "@ollion/flow-core-config"; injectCss("f-suggest", globalStyle); @@ -35,7 +35,6 @@ export type FSuggestWhen = (suggestion: string | FSuggestTemplate, value?: strin export type FSuggestSuggestions = string[] | FSuggestSuggestionsCategory | FSuggestTemplate[]; -@flowElement("f-suggest") export class FSuggest extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-switch/f-switch.ts b/packages/flow-core/src/components/f-switch/f-switch.ts index 32241052f..2557e3e2b 100644 --- a/packages/flow-core/src/components/f-switch/f-switch.ts +++ b/packages/flow-core/src/components/f-switch/f-switch.ts @@ -4,7 +4,7 @@ import eleStyle from "./f-switch.scss?inline"; import globalStyle from "./f-switch-global.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; import { FDiv } from "../f-div/f-div"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; injectCss("f-switch", globalStyle); @@ -14,7 +14,6 @@ export type FSwitchCustomEvent = { value: boolean; }; -@flowElement("f-switch") export class FSwitch extends FRoot { /** * css loaded from scss file @@ -24,7 +23,7 @@ export class FSwitch extends FRoot { /** * @attribute Value of a switch defines if it is on or off. */ - @property({ reflect: true, type: String }) + @property({ reflect: true, type: Boolean }) value?: boolean = false; /** diff --git a/packages/flow-core/src/components/f-tab-content/f-tab-content.ts b/packages/flow-core/src/components/f-tab-content/f-tab-content.ts index aa7a8ca34..093d25097 100644 --- a/packages/flow-core/src/components/f-tab-content/f-tab-content.ts +++ b/packages/flow-core/src/components/f-tab-content/f-tab-content.ts @@ -2,11 +2,10 @@ import { html, PropertyValueMap, unsafeCSS } from "lit"; import { property } from "lit/decorators.js"; import globalStyle from "./f-tab-content-global.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; injectCss("f-tab-content", globalStyle); -@flowElement("f-tab-content") export class FTabContent extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-tab-node/f-tab-node.ts b/packages/flow-core/src/components/f-tab-node/f-tab-node.ts index b405daa16..51f9228ab 100644 --- a/packages/flow-core/src/components/f-tab-node/f-tab-node.ts +++ b/packages/flow-core/src/components/f-tab-node/f-tab-node.ts @@ -4,11 +4,10 @@ import globalStyle from "./f-tab-node-global.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; import { FDiv } from "../f-div/f-div"; import { FTabNodeWidthProp } from "../f-tab/f-tab"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; injectCss("f-tab-node", globalStyle); -@flowElement("f-tab-node") export class FTabNode extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-tab/f-tab.ts b/packages/flow-core/src/components/f-tab/f-tab.ts index c303870e3..21307549a 100644 --- a/packages/flow-core/src/components/f-tab/f-tab.ts +++ b/packages/flow-core/src/components/f-tab/f-tab.ts @@ -6,13 +6,12 @@ import { FRoot } from "../../mixins/components/f-root/f-root"; import { FDiv } from "../f-div/f-div"; import { FTabNode } from "../f-tab-node/f-tab-node"; import { FIconButton } from "../f-icon-button/f-icon-button"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; injectCss("f-tab", globalStyle); export type FTabNodeWidthProp = "fill" | "hug-content" | `${number}`; -@flowElement("f-tab") export class FTab extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-tag/f-tag.ts b/packages/flow-core/src/components/f-tag/f-tag.ts index d4f7d0009..a7040e388 100644 --- a/packages/flow-core/src/components/f-tag/f-tag.ts +++ b/packages/flow-core/src/components/f-tag/f-tag.ts @@ -12,7 +12,7 @@ import getCustomFillColor from "../../utils/get-custom-fill-color"; import LightenDarkenColor from "../../utils/get-lighten-darken-color"; import { FIcon } from "../f-icon/f-icon"; import { FCounter } from "../f-counter/f-counter"; -import { flowElement } from "./../../utils"; + import { createRef, ref, Ref } from "lit/directives/ref.js"; import type { FDiv } from "../f-div/f-div"; import { injectCss } from "@ollion/flow-core-config"; @@ -35,7 +35,7 @@ export type FTagCategory = "fill" | "outline"; /** * @summary Tags allow users to categorize the content. They can be used to add metadata to an element such as category, or property or show a status. */ -@flowElement("f-tag") + export class FTag extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-template/f-template.ts b/packages/flow-core/src/components/f-template/f-template.ts index 9a6f94b87..12e5cff21 100644 --- a/packages/flow-core/src/components/f-template/f-template.ts +++ b/packages/flow-core/src/components/f-template/f-template.ts @@ -1,11 +1,10 @@ import { html, unsafeCSS } from "lit"; import globalStyle from "./f-template-global.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; injectCss("f-template", globalStyle); -@flowElement("f-template") export class FTemplate extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-text-area/f-text-area.ts b/packages/flow-core/src/components/f-text-area/f-text-area.ts index 642c11a22..c28634e6a 100644 --- a/packages/flow-core/src/components/f-text-area/f-text-area.ts +++ b/packages/flow-core/src/components/f-text-area/f-text-area.ts @@ -5,7 +5,7 @@ import globalStyle from "./f-text-area-global.scss?inline"; import { FRoot } from "../../mixins/components/f-root/f-root"; import { FText } from "../f-text/f-text"; import { FDiv } from "../f-div/f-div"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; injectCss("f-text-area", globalStyle); @@ -15,7 +15,6 @@ export type FTextAreaCustomEvent = { value: string; }; -@flowElement("f-text-area") export class FTextArea extends FRoot { /** * css loaded from scss file @@ -61,8 +60,8 @@ export class FTextArea extends FRoot { /** * @attribute This shows the character count while typing and auto limits after reaching the max length. */ - @property({ reflect: true, type: String, attribute: "max-length" }) - maxLength?: string; + @property({ reflect: true, type: Number, attribute: "max-length" }) + maxLength?: number; /** * @attribute Provides a resize handle on the bottom right of text-area which enables a user to resize the text-area within the parents scope. diff --git a/packages/flow-core/src/components/f-text/f-text.ts b/packages/flow-core/src/components/f-text/f-text.ts index 3a28627c3..15092c059 100644 --- a/packages/flow-core/src/components/f-text/f-text.ts +++ b/packages/flow-core/src/components/f-text/f-text.ts @@ -6,7 +6,7 @@ import globalStyle from "./f-text-global.scss?inline"; import getCustomFillColor from "../../utils/get-custom-fill-color"; import { validateHTMLColor } from "validate-color"; import { validateHTMLColorName } from "validate-color"; -import { flowElement } from "./../../utils"; + import { FIcon } from "../f-icon/f-icon"; import { injectCss } from "@ollion/flow-core-config"; import Mark from "mark.js/dist/mark.es6.min"; @@ -26,7 +26,7 @@ export type FTextStateProp = /** * @summary Text component includes Headings, titles, body texts and links. */ -@flowElement("f-text") + export class FText extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-toast/f-toast.ts b/packages/flow-core/src/components/f-toast/f-toast.ts index b7dd2e8b0..581f575ab 100644 --- a/packages/flow-core/src/components/f-toast/f-toast.ts +++ b/packages/flow-core/src/components/f-toast/f-toast.ts @@ -7,13 +7,12 @@ import { ref, createRef, Ref } from "lit/directives/ref.js"; import toastQueue from "./f-toast-queue"; import { FDiv } from "../f-div/f-div"; import { FIcon } from "../f-icon/f-icon"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; injectCss("f-toast", globalStyle); export type FToastState = "default" | "primary" | "success" | "warning" | "danger"; -@flowElement("f-toast") export class FToast extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-core/src/components/f-tooltip/f-tooltip.ts b/packages/flow-core/src/components/f-tooltip/f-tooltip.ts index 8bb9f6040..5eb3c57a0 100644 --- a/packages/flow-core/src/components/f-tooltip/f-tooltip.ts +++ b/packages/flow-core/src/components/f-tooltip/f-tooltip.ts @@ -4,7 +4,7 @@ import globalStyle from "./f-tooltip-global.scss?inline"; import { FDiv } from "../f-div/f-div"; import { FText } from "../f-text/f-text"; import { FPopover } from "../f-popover/f-popover"; -import { flowElement } from "./../../utils"; + import { injectCss } from "@ollion/flow-core-config"; injectCss("f-tooltip", globalStyle); @@ -23,7 +23,6 @@ export type FTooltipPlacement = | "left-end" | "auto"; -@flowElement("f-tooltip") export class FTooltip extends LitElement { /** * css loaded from scss file diff --git a/packages/flow-core/src/index.ts b/packages/flow-core/src/index.ts index 5f60adc03..3937288cd 100644 --- a/packages/flow-core/src/index.ts +++ b/packages/flow-core/src/index.ts @@ -2,6 +2,49 @@ import { ConfigUtil } from "@ollion/flow-core-config"; import { version } from "../package.json"; +import { LitElement } from "lit"; +import { FDiv } from "./components/f-div/f-div"; +import { FButton } from "./components/f-button/f-button"; +import { FIcon } from "./components/f-icon/f-icon"; +import { FDivider } from "./components/f-divider/f-divider"; +import { FCounter } from "./components/f-counter/f-counter"; +import { FText } from "./components/f-text/f-text"; +import { FSpacer } from "./components/f-spacer/f-spacer"; +import { FIconButton } from "./components/f-icon-button/f-icon-button"; +import { FPictogram } from "./components/f-pictogram/f-pictogram"; +import { FTemplate } from "./components/f-template/f-template"; +import { FPopover } from "./components/f-popover/f-popover"; +import { FTag } from "./components/f-tag/f-tag"; +import { FInput } from "./components/f-input/f-input"; +import { FFormGroup } from "./components/f-form-group/f-form-group"; +import { FCheckbox } from "./components/f-checkbox/f-checkbox"; +import { FField } from "./components/f-field/f-field"; +import { FRadio } from "./components/f-radio/f-radio"; +import { FForm } from "./components/f-form/f-form"; +import { FSwitch } from "./components/f-switch/f-switch"; +import { FTextArea } from "./components/f-text-area/f-text-area"; +import { FSelect } from "./components/f-select/f-select"; +import { FTooltip } from "./components/f-tooltip/f-tooltip"; +import { FTab } from "./components/f-tab/f-tab"; +import { FTabNode } from "./components/f-tab-node/f-tab-node"; +import { FTabContent } from "./components/f-tab-content/f-tab-content"; +import { FEmojiPicker } from "./components/f-emoji-picker/f-emoji-picker"; +import { FFileUpload } from "./components/f-file-upload/f-file-upload"; +import { FSuggest } from "./components/f-suggest/f-suggest"; +import { FToast } from "./components/f-toast/f-toast"; +import { FSearch } from "./components/f-search/f-search"; +import { FDateTimePicker } from "./components/f-date-time-picker/f-date-time-picker"; +import { FAccordion } from "./components/f-accordion/f-accordion"; +import { FGrid } from "./components/f-grid/f-grid"; +import { FCarousel } from "./components/f-carousel/f-carousel"; +import { FCarouselContent } from "./components/f-carousel-content/f-carousel-content"; +import { FProgressBar } from "./components/f-progress-bar/f-progress-bar"; +import { FBreadcrumb } from "./components/f-breadcrumb/f-breadcrumb"; +import { FDocumentViewer } from "./components/f-document-viewer/f-document-viewer"; +import { FFormField } from "./components/f-form-field/f-form-field"; +import { FInputLight } from "./components/f-input/f-input-light"; +import { FColorPicker } from "./components/f-color-picker/f-color-picker"; +import { FCountdown } from "./components/f-countdown/f-countdown"; export { flowElement } from "./utils"; @@ -78,3 +121,61 @@ console.log( "background:#161616;color:white;padding:4px 6px 4px 6px;border-radius:4px 0px 0px 4px", "background:#695bf4;color:white;padding:4px 6px 4px 6px;border-radius:0px 4px 4px 0px;" ); + +export const flowCoreElements = [ + FDiv, + FButton, + FIcon, + FDivider, + FCounter, + FText, + FSpacer, + FIconButton, + FPictogram, + FTemplate, + FPopover, + FTag, + FInput, + FFormGroup, + FCheckbox, + FField, + FRadio, + FForm, + FSwitch, + FTextArea, + FSelect, + FTooltip, + FTab, + FTabNode, + FTabContent, + FEmojiPicker, + FFileUpload, + FSuggest, + FToast, + FSearch, + FDateTimePicker, + FAccordion, + FGrid, + FCarousel, + FCarouselContent, + FProgressBar, + FBreadcrumb, + FDocumentViewer, + FFormField, + FInputLight, + FColorPicker, + FCountdown +]; +export function register(elements: (new () => LitElement)[]) { + elements.forEach(element => { + const tagName = element.name.replace( + /[A-Z]/g, + (match, offset) => (offset > 0 ? "-" : "") + match.toLowerCase() + ); + if (!customElements.get(tagName)) customElements.define(tagName, element); + }); +} + +export function registerAll() { + register(flowCoreElements); +} diff --git a/packages/flow-core/vite.config.ts b/packages/flow-core/vite.config.ts index de6010547..3a0a2747b 100644 --- a/packages/flow-core/vite.config.ts +++ b/packages/flow-core/vite.config.ts @@ -1,10 +1,17 @@ import { defineConfig } from "vite"; +import { visualizer } from "rollup-plugin-visualizer"; +import terser from "@rollup/plugin-terser"; export default defineConfig({ + plugins: [ + visualizer({ + gzipSize: true + }) + ], build: { // Disabling minification makes it easy to debug during development // And all modern bundlers will consume the library and minify it anyway - minify: false, + minify: true, sourcemap: true, lib: { entry: "src/index.ts", @@ -24,8 +31,13 @@ export default defineConfig({ "rxjs", "@ollion/flow-core-config", "vanilla-colorful", - "mark.js" - ] + "mark.js", + "@emoji-mart/data", + "@lit-labs/virtualizer", + "flatpickr", + "@floating-ui/dom" + ], + plugins: [terser()] } } }); diff --git a/packages/flow-dashboard/.npmignore b/packages/flow-dashboard/.npmignore deleted file mode 100644 index f245c4cd1..000000000 --- a/packages/flow-dashboard/.npmignore +++ /dev/null @@ -1,8 +0,0 @@ -* -!dist/**/*.* -!shims.d.ts -!custom-elements.json -!html.html-data.json -!src/**/*.* -!README.md -!umd/**/*.* \ No newline at end of file diff --git a/packages/flow-dashboard/CHANGELOG.md b/packages/flow-dashboard/CHANGELOG.md deleted file mode 100644 index 6ba2ee549..000000000 --- a/packages/flow-dashboard/CHANGELOG.md +++ /dev/null @@ -1,13 +0,0 @@ -

Release Notes

- -# Change Log - -## [0.0.1] - 2023-11-03 - -### First Release - -- `@ollion/flow-dashboard` released. - -### Note - -- Since this is the first release, we are testing it with various frameworks (thus, it is not production-ready) diff --git a/packages/flow-dashboard/LICENSE b/packages/flow-dashboard/LICENSE deleted file mode 100644 index b766bcd68..000000000 --- a/packages/flow-dashboard/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ - -Copyright (c) 2022 CloudCover Consultancy Pvt Ltd - -Permission is hereby granted, free of charge, to any person obtaining -a copy of this software and associated documentation files (the -"Software"), to deal in the Software without restriction, including -without limitation the rights to use, copy, modify, merge, publish, -distribute, sublicense, and/or sell copies of the Software, and to -permit persons to whom the Software is furnished to do so, subject to -the following conditions: - -The above copyright notice and this permission notice shall be -included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE -LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION -OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION -WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/packages/flow-dashboard/README.md b/packages/flow-dashboard/README.md deleted file mode 100644 index 0ce9ffb72..000000000 --- a/packages/flow-dashboard/README.md +++ /dev/null @@ -1,60 +0,0 @@ -# Flow Dashboard - -The Flow dashboard is built on the Flow design framework ([website](https://flow.ollion.com/) / [github](https://github.com/ollionorg/flow-core)) - -# Installation - -### 1️⃣ Install flow dashboard dependency - -``` -npm i --save @ollion/flow-dashboard -``` - -**Note:** after installation, re-start your application. - -
- -### 2️⃣ Import flow-dashboard into your project - -Paste the below snippet in your project and add your application startup/runtime code to it. - -```javascript -import "@ollion/flow-core"; -import "@ollion/flow-dashboard"; -``` - -
- -### 3️⃣ For a typescript enabled project (optional) - -**Note:** After adding, re-start your application. Make sure you are using version >4.5 - -**For Vue 3:** -Copy paste below import types in your `main.ts` file. - -```Javascript -import "@ollion/flow-dashboard/dist/types/vue3"; -``` - -
-For Vue 2 - -Copy paste below import types in your `main.ts` file. - -```Javascript -import "@ollion/flow-dashboard/dist/types/vue2"; -``` - -
- -
-For React - -**React**: Include react type in `tsconfig.json` file like below. - -```json -"include": ["src", "./node_modules/@ollion/flow-dashboard/dist/types/react.ts"] -``` - -
-
diff --git a/packages/flow-dashboard/compile.sh b/packages/flow-dashboard/compile.sh deleted file mode 100644 index 86e4db59d..000000000 --- a/packages/flow-dashboard/compile.sh +++ /dev/null @@ -1,12 +0,0 @@ - -#!/bin/bash - -HERE=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd ) - -cd "$HERE" - -pnpm run analyze - -echo "building library..." -pnpm vite build --emptyOutDir -pnpm vite build --emptyOutDir --config vite.umd.config.ts diff --git a/packages/flow-dashboard/package.json b/packages/flow-dashboard/package.json deleted file mode 100644 index 32dd419cb..000000000 --- a/packages/flow-dashboard/package.json +++ /dev/null @@ -1,67 +0,0 @@ -{ - "name": "@ollion/flow-dashboard", - "version": "0.0.1", - "description": "Dashboard as code", - "module": "dist/flow-dashboard.es.js", - "main": "dist/flow-dashboard.cjs.js", - "types": "dist/src/index.d.ts", - "scripts": { - "build": "bash ./compile.sh", - "build:watch": "concurrently --kill-others \"vite build --emptyOutDir --watch\" \"tsc --watch\"", - "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" && wca analyze src --format vscode --outFile html.html-data.json", - "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch", - "test": "web-test-runner ./src/**/*.test.ts --node-resolve --port 8095", - "test:file": "pnpm run build && web-test-runner --node-resolve --port 8095", - "test:watch": "pnpm run build && web-test-runner ./src/**/*.test.ts --node-resolve --watch --port 8095" - }, - "keywords": [ - "web-components", - "lit-element", - "typescript", - "lit" - ], - "dependencies": { - "@ollion/flow-core": "workspace:*", - "@ollion/flow-core-config": "workspace:*", - "axios": "^0.27.2", - "d3": "^7.6.1", - "gridstack": "^9.5.0", - "lit": "^3.1.0", - "rxjs": "^7.8.1" - }, - "peerDependencies": { - "@ollion/flow-core": "^*", - "@ollion/flow-core-config": "^*" - }, - "devDependencies": { - "@custom-elements-manifest/analyzer": "^0.5.7", - "@open-wc/testing": "^3.1.5", - "@types/d3": "7.4.3", - "@types/jest": "29.5.5", - "@web/dev-server-esbuild": "^0.4.1", - "@web/test-runner": "^0.17.1", - "concurrently": "^8.2.1", - "esbuild-sass-plugin": "2.2.6", - "lit-html": "^3.1.0", - "sass": "^1.52.3", - "typescript": "^5.2.2", - "vite": "^4.4.11", - "web-component-analyzer": "^2.0.0-next.4" - }, - "repository": { - "type": "git", - "url": "https://github.com/ollionorg/flow-core.git", - "directory": "packages/flow-dashboard" - }, - "publishConfig": { - "access": "public", - "registry": "https://registry.npmjs.org" - }, - "customElements": "custom-elements.json", - "bugs": { - "url": "https://github.com/ollionorg/flow-core/issues" - }, - "homepage": "https://github.com/ollionorg/flow-core/packages/flow-dashboard#readme", - "author": "@ollion", - "license": "MIT" -} diff --git a/packages/flow-dashboard/src/components/f-dashboard/f-dashboard-global.scss b/packages/flow-dashboard/src/components/f-dashboard/f-dashboard-global.scss deleted file mode 100644 index 9e83cb133..000000000 --- a/packages/flow-dashboard/src/components/f-dashboard/f-dashboard-global.scss +++ /dev/null @@ -1,46 +0,0 @@ -@import "../../../../flow-core/src/mixins/scss/mixins"; - -@import "gridstack/dist/gridstack.min.css"; - -f-dashboard { - @include base(); - height: 100%; - width: 100%; - - display: flex; - overflow: auto; - .grid-stack { - width: 100%; - .grid-stack-item { - .grid-stack-item-content { - background: var(--color-surface-secondary); - display: flex; - flex-direction: column; - f-timeseries-chart { - flex: 1 0 100%; - } - > f-div[height="fill-container"] { - flex: 1 1; - max-height: 100%; - } - > f-div[width="fill-container"] { - width: 100%; - } - } - } - } -} - -f-div[direction="column"] { - > f-dashboard { - flex: 1 1; - max-height: 100%; - } -} - -f-div[direction="row"] { - > f-dashboard { - flex: 1 1; - max-width: 100%; - } -} diff --git a/packages/flow-dashboard/src/components/f-dashboard/f-dashboard-utils.ts b/packages/flow-dashboard/src/components/f-dashboard/f-dashboard-utils.ts deleted file mode 100644 index 7ab362290..000000000 --- a/packages/flow-dashboard/src/components/f-dashboard/f-dashboard-utils.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { html, nothing } from "lit"; -import { FDashboardWidget } from "../../types"; - -export function getWidgetHeader(widget: FDashboardWidget) { - if (widget.header) { - if (typeof widget.header === "object") { - return html` - ${widget.header.title} - ${widget.header.description} - `; - } else if (typeof widget.header === "function") { - return widget.header(); - } - } - - return nothing; -} - -export function getWidgetFooter(widget: FDashboardWidget) { - if (widget.footer) { - if (typeof widget.footer === "string") { - return html` - ${widget.footer} - `; - } else if (typeof widget.footer === "function") { - return widget.footer(); - } - } - - return nothing; -} - -export function renderWidget(widget: FDashboardWidget) { - switch (widget.type) { - case "big-number": - return html`${widget.data.toFixed(2)}`; - - case "timeseries": - return html``; - - default: - return nothing; - } -} diff --git a/packages/flow-dashboard/src/components/f-dashboard/f-dashboard.ts b/packages/flow-dashboard/src/components/f-dashboard/f-dashboard.ts deleted file mode 100644 index dbe44bcfe..000000000 --- a/packages/flow-dashboard/src/components/f-dashboard/f-dashboard.ts +++ /dev/null @@ -1,108 +0,0 @@ -import { CSSResult, html, PropertyValueMap, unsafeCSS } from "lit"; -import { property } from "lit/decorators.js"; -import { FRoot, flowElement } from "@ollion/flow-core"; -import globalStyle from "./f-dashboard-global.scss?inline"; -import { injectCss } from "@ollion/flow-core-config"; -import { GridStack } from "gridstack"; -import { FDashboardConfig } from "../../types"; -import { getWidgetHeader, renderWidget, getWidgetFooter } from "./f-dashboard-utils"; -import { createRef, Ref, ref } from "lit/directives/ref.js"; - -import { keyed } from "lit/directives/keyed.js"; - -injectCss("f-dashboard", globalStyle); - -// const pollingWorker = new Worker(new URL("./polling-worker.ts", import.meta.url)); -@flowElement("f-dashboard") -export class FDashboard extends FRoot { - /** - * css loaded from scss file - */ - static styles: CSSResult[] = [unsafeCSS(globalStyle)]; - - /** - * @attribute comments baout title - */ - @property({ type: Object }) - config!: FDashboardConfig; - - /** - * mention required fields here for generating vue types - */ - readonly required = ["config"]; - - gridStack?: GridStack; - - gridStackElement: Ref = createRef(); - - createRenderRoot() { - return this; - } - protected willUpdate( - _changedProperties: PropertyValueMap | Map - ): void { - if (this.gridStack) { - // destroy existing grid - this.gridStack.destroy(false); - } - } - - render() { - return html` -
- ${this.config.widgets.map(wgt => { - return keyed( - wgt.id, - html`
-
- ${getWidgetHeader(wgt)}${renderWidget(wgt)}${getWidgetFooter(wgt)} -
-
` - ); - })} -
- `; - } - - protected updated(changedProperties: PropertyValueMap | Map): void { - super.updated(changedProperties); - try { - this.gridStack = GridStack.init({ margin: "4px" }); - - this.updateWidgetFontSize(); - this.gridStack.on("resizecontent", () => { - this.updateWidgetFontSize(); - }); - } catch (er) { - //ignore girdstack error for now - } - } - - updateWidgetFontSize() { - this.querySelectorAll(".grid-stack-item-content > .big-number").forEach( - widgetContainer => { - const wHeight = widgetContainer.offsetHeight; - const wWidth = widgetContainer.offsetWidth; - const fontSize = Math.min(wHeight, wWidth) * 0.3 + "px"; - widgetContainer.style.fontSize = fontSize; - widgetContainer.style.display = "flex"; - widgetContainer.style.alignItems = "center"; - widgetContainer.style.justifyContent = "center"; - } - ); - } -} - -/** - * Required for typescript - */ -declare global { - export interface HTMLElementTagNameMap { - "f-dashboard": FDashboard; - } -} diff --git a/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart-global.scss b/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart-global.scss deleted file mode 100644 index f63f1e83d..000000000 --- a/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart-global.scss +++ /dev/null @@ -1,110 +0,0 @@ -@import "../../../../flow-core/src/mixins/scss/mixins"; -f-timeseries-chart { - @include base(); - display: flex; - flex-direction: column; - min-height: 100px; - - svg { - .domain { - stroke: var(--color-border-secondary); - } - .tick { - line { - stroke: var(--color-border-secondary); - &.grid-line { - stroke: var(--color-border-subtle); - } - } - text { - stroke: var(--color-text-secondary); - } - } - .tooltip-line { - stroke: var(--color-border-default); - stroke-dasharray: 6; - } - .tooltip-point { - fill: var(--color-primary-default); - } - .area-path, - .bars { - fill-opacity: 0.5; - } - } - .f-chart-tooltip { - position: fixed; - pointer-events: none; - z-index: 1; - &.hide { - display: none; - } - &.show { - display: flex; - } - transition: - left 0.2s linear, - top 0.2s linear, - bottom 0.2s linear, - right 0.2s linear; - } - - .disable-legend { - opacity: 0.4; - } - - .series-path, - .custom-lines { - transition: - opacity 0.3s linear, - stroke-width 0.3s linear; - } - .series-path.disable, - .custom-lines.disable { - opacity: 0.5; - fill-opacity: 0.5; - .bars { - fill-opacity: 0.3; - } - } - .series-path.active, - .custom-lines.active { - opacity: 1; - fill-opacity: 1 !important; - stroke-opacity: 1; - .bars { - fill-opacity: 1; - } - &.line-path { - stroke-width: 2pt !important; - } - } - - .f-timeseries-wrapper { - &[data-legends-position="top"] { - flex-direction: column-reverse; - } - &[data-legends-position="left"] { - flex-direction: row-reverse; - } - &[data-legends-position="right"] { - flex-direction: row; - } - } -} - -f-div[direction="column"] { - > f-timeseries-chart { - flex: 1 1; - max-height: 100%; - width: 100%; - } -} - -f-div[direction="row"] { - > f-timeseries-chart { - flex: 1 1; - max-width: 100%; - height: 100%; - } -} diff --git a/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart-types.ts b/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart-types.ts deleted file mode 100644 index 5c48f1218..000000000 --- a/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart-types.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { HTMLTemplateResult } from "lit"; - -export type AxisLine = { - value: number; - color: string; -}; - -export type YAxisLine = AxisLine; -export type XAxisLine = AxisLine; -export type TimeseriesPoint = { - date: number; - value: number; -}; - -export type SeriesType = "line" | "bar" | "area"; -export type TimeseriesData = { - seriesName: string; - points: TimeseriesPoint[]; - color: string; - type: SeriesType; - disable?: boolean; -}; - -export type FTimeseriesTickAuto = { - type: "auto"; -}; - -export type TickInterval = { - type: "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "months" | "years"; - every: number; -}; - -export type FTimeseriesXTickInterval = { - type: "interval"; - interval: TickInterval; -}; - -export type FTimeseriesXTickValues = { - type: "values"; - values: Date[]; -}; - -export type FTimeseriesYTickValues = { - type: "values"; - values: number[]; -}; - -export type FTimeseriesXTickConfig = { - format?: (tickDate: Date) => string; -} & (FTimeseriesTickAuto | FTimeseriesXTickInterval | FTimeseriesXTickValues); - -export type FTimeseriesYTickConfig = { - format?: (value: number) => string; -} & (FTimeseriesTickAuto | FTimeseriesYTickValues); - -export type FTimeseriesLegendTemplate = ( - interactions: FTimeseriesLegendInteraction -) => HTMLTemplateResult; -export type FTimeseriesLegendInteraction = { - click: (seriesName: string) => void; - mouseLeave: () => void; - mouseEnter: (seriesName: string) => void; -}; - -export type FTimeseriesChartConfig = { - data: TimeseriesData[]; - size?: { - width?: number; - height?: number; - margin?: { - top?: number; - right?: number; - left?: number; - bottom?: number; - }; - }; - xAxis?: { - lines?: XAxisLine[]; - tickConfig?: FTimeseriesXTickConfig; - }; - yAxis?: { - lines?: YAxisLine[]; - tickConfig?: FTimeseriesYTickConfig; - }; - legends?: { - disabled?: boolean; - position?: "bottom" | "left" | "right" | "top"; - template?: FTimeseriesLegendTemplate; - }; - tooltipTemplate?: (tooltipDate: Date, tooltipPoints: TooltipPoints) => HTMLTemplateResult; -}; - -export type TooltipPoints = { - seriesName: string; - value: number; - color: string; - type: SeriesType; - date: number; -}[]; diff --git a/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart-utils.ts b/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart-utils.ts deleted file mode 100644 index 527d68880..000000000 --- a/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart-utils.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { TickInterval, TooltipPoints } from "./f-timeseries-chart-types"; -import * as d3 from "d3"; -import { html } from "lit"; -import { Subject } from "rxjs"; - -export const TOOLTIP_SYNC = new Subject(); - -export function getTickInterval({ type, every }: TickInterval) { - return d3.timeInterval( - (_date: Date) => {}, - (date: Date, _step: number) => { - switch (type) { - case "milliseconds": - date.setMilliseconds(date.getMilliseconds() + every); - break; - case "seconds": - date.setSeconds(date.getSeconds() + every); - break; - case "minutes": - date.setMinutes(date.getMinutes() + every); - break; - case "hours": - date.setHours(date.getHours() + every); - break; - case "days": - date.setDate(date.getDate() + every); - break; - case "months": - date.setMonth(date.getMonth() + every); - break; - case "years": - date.setFullYear(date.getFullYear() + every); - } - } - ); -} - -export function defaultTooltipTemplate(tooltipDate: Date, tooltipPoints: TooltipPoints) { - return html` - Date : ${tooltipDate.toLocaleDateString()} ${tooltipDate.toLocaleTimeString()} - ${tooltipPoints.map(point => { - return html`${point.seriesName} : - ${point?.value}`; - })} - `; -} - -export function escapeSeriesName(name: string) { - return name.replace(/[^a-zA-Z0-9]/g, "_"); -} diff --git a/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart.test.ts b/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart.test.ts deleted file mode 100644 index b53aca4c4..000000000 --- a/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart.test.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { expect } from "@open-wc/testing"; - -// IconPack to test -import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; -// import flow-core elements -import "@ollion/flow-core"; -import "@ollion/flow-dashboard"; -import { ConfigUtil } from "@ollion/flow-core"; -import { FTimeseriesChart } from "@ollion/flow-dashboard"; - -ConfigUtil.setConfig({ iconPack: IconPack }); - -describe("f-timeseries-chart", () => { - it("is defined", () => { - const el = document.createElement("f-timeseries-chart"); - expect(el).instanceOf(FTimeseriesChart); - }); -}); diff --git a/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart.ts b/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart.ts deleted file mode 100644 index 2e80bd1fe..000000000 --- a/packages/flow-dashboard/src/components/f-timeseries-chart/f-timeseries-chart.ts +++ /dev/null @@ -1,713 +0,0 @@ -import { html, PropertyValueMap, unsafeCSS, svg, render, nothing } from "lit"; -import { property } from "lit/decorators.js"; -import { FRoot, flowElement, FDiv } from "@ollion/flow-core"; -import globalStyle from "./f-timeseries-chart-global.scss?inline"; -import { injectCss } from "@ollion/flow-core-config"; -import * as d3 from "d3"; -import { NumberValue } from "d3"; -import { createRef, Ref, ref } from "lit/directives/ref.js"; -import { - FTimeseriesChartConfig, - TimeseriesData, - TimeseriesPoint, - TooltipPoints -} from "./f-timeseries-chart-types"; -import { - defaultTooltipTemplate, - escapeSeriesName, - getTickInterval, - TOOLTIP_SYNC -} from "./f-timeseries-chart-utils"; - -import type { Subscription } from "rxjs"; - -injectCss("f-timeseries-chart", globalStyle); - -@flowElement("f-timeseries-chart") -export class FTimeseriesChart extends FRoot { - /** - * css loaded from scss file - */ - - static styles = [unsafeCSS(globalStyle)]; - - /** - * @attribute comments baout title - */ - @property({ type: Object }) - config!: FTimeseriesChartConfig; - - chartContainer: Ref = createRef(); - chartLegends: Ref = createRef(); - - chartTooltip: Ref = createRef(); - - x!: d3.ScaleTime; - y!: d3.ScaleLinear; - svg!: d3.Selection; - xAxisG!: d3.Selection; - yAxisG!: d3.Selection; - path!: d3.Selection; - bars!: d3.Selection; - seriesBars!: d3.ValueFn; - xGridLines!: (g: d3.Selection) => void; - yGridLines!: (g: d3.Selection) => void; - line!: d3.Line; - xAxis!: d3.Axis; - yAxis!: d3.Axis; - area!: d3.Area; - tooltipSub?: Subscription; - /** - * mention required fields here for generating vue types - */ - readonly required = ["config"]; - /** - * Resize observer to detect if container is resized - */ - resizeObserver: ResizeObserver | undefined; - /** - * activate when this element is connected to DOM - */ - activateResizeObserver: boolean = false; - - get chartWidth() { - if (this.config.size?.width) { - return this.config.size?.width; - } - return this.chartContainer.value?.offsetWidth ?? 300; - } - get chartHeight() { - if (this.config.size?.height) { - return this.config.size?.height; - } - return this.chartContainer.value?.offsetHeight ?? 300; - } - - get chartMargin() { - const margin = this.config.size?.margin; - return [margin?.top ?? 16, margin?.right ?? 16, margin?.bottom ?? 30, margin?.left ?? 35]; - } - - checkTickOverlapping = () => { - if ( - this.config.xAxis && - this.config.xAxis.tickConfig && - this.config.xAxis.tickConfig.type !== "auto" - ) { - const allTicks = this.querySelectorAll(".x-axis .tick text"); - const allTicksArray = Array.from(allTicks); - let lastVisibleTickIdx = 0; - - allTicksArray.forEach((tick, idx) => { - if (idx > 0 && tick.getBoundingClientRect().x > 0) { - const lastTick = allTicksArray[lastVisibleTickIdx]; - if ( - tick.getBoundingClientRect().x - lastTick.getBoundingClientRect().x < - lastTick.getBoundingClientRect().width + 24 - ) { - tick.style.display = "none"; - } else { - lastVisibleTickIdx = idx; - } - } - }); - } - }; - - connectedCallback() { - super.connectedCallback(); - /** - * Creating ResizeObserver Instance - */ - this.resizeObserver = new ResizeObserver(() => { - //avoid first call , since it is not required - if (this.activateResizeObserver) { - this.init(); - } - this.activateResizeObserver = true; - }); - - this.resizeObserver.observe(this); - } - disconnectedCallback() { - /** - * disconnecting resize observer - */ - this.resizeObserver?.disconnect(); - - if (this.tooltipSub) { - this.tooltipSub.unsubscribe(); - } - super.disconnectedCallback(); - } - - plotCustomLines = () => { - this.svg.call(g => g.selectAll(".custom-lines").remove()); - this.config.yAxis?.lines?.forEach(line => { - const y = this.y(line.value); - if (!isNaN(y)) { - this.svg - .append("line") - .attr("class", "y-lines custom-lines") - .attr("x1", `${this.chartMargin[3]}`) - .attr("x2", `${this.chartWidth - this.chartMargin[1]}`) - .attr("y1", `${y}`) - .attr("y2", `${y}`) - .attr("stroke", `${line.color}`); - } - }); - this.config.xAxis?.lines?.forEach(line => { - const x = this.x(line.value); - if (!isNaN(x)) { - this.svg - .append("line") - .attr("class", "x-lines custom-lines") - .attr("x1", `${x}`) - .attr("x2", `${x}`) - .attr("y1", `${this.chartMargin[0]}`) - .attr("y2", `${this.chartHeight - this.chartMargin[2]}`) - .attr("stroke", `${line.color}`); - } - }); - }; - - createRenderRoot() { - return this; - } - - get isLegendsHorizontal() { - return this.config.legends?.position === "left" || this.config.legends?.position == "right"; - } - - getDefualtLegendTemplate() { - if (!this.config.legends?.disabled) { - return html` - ${this.config.data.map(series => { - return html` this.handleLegendClick(event, series)} - @mouseenter=${() => this.handleMouseEnter(series)} - @mouseleave=${() => this.handleMouseLeave()} - clickable - align="middle-left" - gap="small" - >${series.seriesName}`; - })} - `; - } - - return nothing; - } - - getLegendTemplate() { - if (!this.config.legends?.disabled) { - if (this.config.legends?.template) { - // eslint-disable-next-line @typescript-eslint/no-this-alias - const element = this; - const click = (seriesName: string) => { - element.legendClick(element, seriesName); - }; - const mouseEnter = (seriesName: string) => { - element.legendMouseEnter(element, seriesName); - }; - const mouseLeave = () => { - element.legendMouseLeave(element); - }; - return this.config.legends?.template({ - click, - mouseEnter, - mouseLeave - }); - } - return this.getDefualtLegendTemplate(); - } - return nothing; - } - - render() { - return html` - ${svg``} - - - ${this.getLegendTemplate()} - `; - } - - legendClick(element: FTimeseriesChart, seriesName: string) { - const series = element.config.data.find(s => s.seriesName === seriesName); - if (series) { - series.disable = !series.disable; - element.init(); - } - } - legendMouseLeave(element: FTimeseriesChart) { - element.querySelectorAll(".series-path,.custom-lines").forEach(path => { - path.classList.remove("disable"); - path.classList.remove("active"); - }); - } - legendMouseEnter(element: FTimeseriesChart, seriesName: string) { - const series = element.config.data.find(s => s.seriesName === seriesName); - if (series && !series.disable) { - element.querySelectorAll(".series-path,.custom-lines").forEach(path => { - if (!path.classList.contains(`series-${escapeSeriesName(series.seriesName)}-path`)) { - path.classList.add("disable"); - } else { - path.classList.add("active"); - } - }); - } - } - handleLegendClick(e: PointerEvent, series: TimeseriesData) { - const legend = e.currentTarget as FDiv; - legend.classList.toggle("disable-legend"); - this.legendClick(this, series.seriesName); - } - handleMouseEnter(series: TimeseriesData) { - this.legendMouseEnter(this, series.seriesName); - } - handleMouseLeave() { - this.legendMouseLeave(this); - } - - init() { - this.chartContainer.value!.querySelector("svg")!.innerHTML = ``; - const chartData = this.config.data.filter(s => !s.disable); - const chartDataFlat = chartData.map(series => series.points).flat(); - - const width = this.chartWidth; - const height = this.chartHeight; - const [marginTop, marginRight, marginBottom, marginLeft] = this.chartMargin; - - // Declare the x (horizontal position) scale. - this.x = d3.scaleTime( - d3.extent(chartDataFlat, d => d.date) as Iterable, - [marginLeft, width - marginRight] - ); - - // Declare the y (vertical position) scale. - this.y = d3.scaleLinear([0, d3.max(chartDataFlat, d => d.value)] as Iterable, [ - height - marginBottom, - marginTop - ]); - - this.area = d3 - .area() - .curve(d3.curveMonotoneX) - .x(d => { - return this.x(d.date); - }) - .y0(this.y(0)) - .y1(d => { - return this.y(d.value); - }); - - // Declare the line generator. - this.line = d3 - .line() - .x(d => this.x(d.date)) - .y(d => this.y(d.value)); - - // Create the SVG container. - this.svg = d3 - .select(this.chartContainer.value!.querySelector("svg")) - .attr("width", width) - .attr("height", height) - .attr("viewBox", [0, 0, width, height]) - .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); - - const xTooltipLine = this.svg - .append("line") - .attr("class", "x-tooltip-line tooltip-line") - .attr("x1", `0`) - .attr("x2", `0`) - .attr("y1", `0`) - .attr("y2", `0`); - const yTooltipLine: Record> = {}; - - chartData.forEach(series => { - yTooltipLine[series.seriesName] = this.svg - .append("line") - .attr("class", "y-tooltip-line tooltip-line") - .attr("x1", `0`) - .attr("x2", `0`) - .attr("y1", `0`) - .attr("y2", `0`); - }); - const bisect = d3.bisector(d => d.date).center; - - this.xGridLines = (g: d3.Selection) => { - g.selectAll(".tick line") - .clone() - .attr("class", "x-grid-line grid-line") - .attr("x2", width - marginLeft - marginRight); - }; - this.yGridLines = (g: d3.Selection) => { - g.selectAll(".tick line") - .clone() - .attr("class", "y-grid-line grid-line") - .attr("y2", marginTop + marginBottom - height); - }; - - // Add the x-axis. - this.xAxis = d3 - .axisBottom(this.x) - .ticks(width / 80) - .tickSizeOuter(0); - - if (this.config.xAxis?.tickConfig) { - const tickConfig = this.config.xAxis.tickConfig; - if (tickConfig.type === "auto") { - this.xAxis.ticks(Math.max(width / 80, 2)); - } else if (tickConfig.type === "interval") { - this.xAxis.ticks(getTickInterval(tickConfig.interval)); - } else if (tickConfig.type === "values") { - this.xAxis.tickValues(tickConfig.values); - } - - if (tickConfig.format) { - this.xAxis.tickFormat(tickConfig.format); - } - } - this.xAxisG = this.svg - .append("g") - .attr("class", "x-axis") - .attr("transform", `translate(0,${height - marginBottom})`) - .call(this.xAxis) - .call(this.yGridLines); - - // Add the y-axis, remove the domain line, add grid lines and a label. - this.yAxis = d3.axisLeft(this.y).ticks(height / 40); // - - if (this.config.yAxis?.tickConfig) { - const tickConfig = this.config.yAxis.tickConfig; - if (tickConfig.type === "auto") { - this.yAxis.ticks(Math.max(height / 40, 2)); - } else if (tickConfig.type === "values") { - this.yAxis.tickValues(tickConfig.values); - } - - if (tickConfig.format) { - this.yAxis.tickFormat(tickConfig.format); - } - } - - this.yAxisG = this.svg - .append("g") - .attr("transform", `translate(${marginLeft},0)`) - .call(this.yAxis) - .call(this.xGridLines); - - // Append a path for the line. - - this.path = this.svg - .selectAll("path.chart-path") - .data( - chartData.filter(td => td.type === "line" || td.type === "area"), - d => d.seriesName - ) - .join("path") - .attr("fill", "none") - .attr("class", d => { - let pathClass = "chart-path "; - if (d.type === "line") { - pathClass += " line-path"; - } else if (d.type === "area") { - pathClass += " area-path"; - } - - pathClass += " series-path series-" + escapeSeriesName(d.seriesName) + "-path"; - return pathClass; - }) - .attr("stroke", d => d.color) - .attr("stroke-width", 1.2) - .attr("fill", d => { - if (d.type === "area") { - return d.color; - } - return "none"; - }) - .attr("d", d => { - if (d.type === "line") { - return this.line(d.points); - } else if (d.type === "area") { - return this.area(d.points); - } - return "none"; - }); - - this.bars = this.svg - .selectAll("g.bar-g") - .data( - chartData.filter(td => td.type === "bar"), - d => d.seriesName - ) - .join("g") - .attr("class", d => { - return `bar-g series-path series-${escapeSeriesName(d.seriesName)}-path`; - }) - .attr("transform", (d, i) => `translate(${i * (width / d.points.length)},0)`); - // eslint-disable-next-line @typescript-eslint/no-this-alias - const element = this; - this.seriesBars = function (d) { - let rectWidth = width / d.points.length - 2; - if (rectWidth < 0) { - rectWidth = 1; - } - d3.select(this) - .selectAll("rect.bars") - .data(d.points, d => d.date) - .join("rect") - .attr("class", "bars") - .attr("y", d => element.y(d.value)) - .attr("x", d => element.x(d.date)) - .attr("fill", d.color) - .attr("width", rectWidth) - .attr("height", d => height - marginBottom - element.y(d.value)); - }; - this.bars.each(this.seriesBars); - - const tooltipPoint: Record< - string, - d3.Selection - > = {}; - - chartData.forEach(series => { - tooltipPoint[series.seriesName] = this.svg - .append("circle") - .attr("fill", series.color) - .attr("cx", `0`) - .attr("cy", `0`) - .attr("r", `0`); - }); - const pointermoved = (event: PointerEvent | number) => { - const time = - event instanceof PointerEvent ? this.x.invert(d3.pointer(event)[0]).getTime() : event; - - xTooltipLine - .attr("x1", `${this.x(time)}`) - .attr("x2", `${this.x(time)}`) - .attr("y1", `${marginTop}`) - .attr("y2", `${height - marginBottom}`); - - chartData.forEach(series => { - const i = bisect(series.points, time); - const seriesPoint = series.points[i]; - if (seriesPoint) { - yTooltipLine[series.seriesName] - .attr("x1", `${marginLeft}`) - .attr("x2", `${width - marginRight}`) - .attr("y1", `${this.y(seriesPoint.value)}`) - .attr("y2", `${this.y(seriesPoint.value)}`); - - tooltipPoint[series.seriesName] - .attr("cx", `${this.x(seriesPoint.date)}`) - .attr("cy", `${this.y(seriesPoint.value)}`) - .attr("r", `4`); - } - }); - - if (this.chartTooltip.value) { - const coOrdinates = Object.values(tooltipPoint)[0].node()?.getBoundingClientRect(); - this.chartTooltip.value.classList.add("show"); - this.chartTooltip.value.classList.remove("hide"); - const tooltipOffset = 32; - if (coOrdinates && coOrdinates.top < Math.max(this.chartTooltip.value.offsetHeight, 150)) { - this.chartTooltip.value.style.removeProperty("top"); - this.chartTooltip.value.style.setProperty( - "bottom", - `${ - document.body.offsetHeight - - ((coOrdinates?.top ?? 0) + this.chartTooltip.value.offsetHeight) - }px` - ); - } else { - this.chartTooltip.value.style.removeProperty("bottom"); - this.chartTooltip.value.style.setProperty( - "top", - `${(coOrdinates?.top ?? 0) + tooltipOffset}px` - ); - } - - if ( - coOrdinates && - coOrdinates.left > - document.body.offsetWidth - Math.max(this.chartTooltip.value.offsetWidth, 320) - ) { - this.chartTooltip.value.style.removeProperty("left"); - this.chartTooltip.value.style.setProperty( - "right", - `${document.body.offsetWidth + tooltipOffset - coOrdinates?.left}px` - ); - } else { - this.chartTooltip.value.style.removeProperty("right"); - this.chartTooltip.value.style.setProperty( - "left", - `${(coOrdinates?.left ?? 0) + tooltipOffset}px` - ); - } - - const tooltipPoints: TooltipPoints = chartData.map(series => { - const i = bisect(series.points, time); - const seriesPoint = series.points[i]; - return { - seriesName: series.seriesName, - value: seriesPoint?.value, - color: series.color, - type: series.type, - date: seriesPoint.date - }; - }); - const xDate = new Date(); - xDate.setTime(tooltipPoints[0].date ?? time); - if (event instanceof PointerEvent) { - TOOLTIP_SYNC.next(xDate.getTime()); - } - render( - this.config.tooltipTemplate - ? this.config.tooltipTemplate(xDate, tooltipPoints) - : defaultTooltipTemplate(xDate, tooltipPoints), - this.chartTooltip.value - ); - } - }; - - const pointerleft = (event: PointerEvent | number) => { - if ( - (event instanceof PointerEvent && event.relatedTarget !== this.chartTooltip.value) || - event === 0 - ) { - if (this.chartTooltip.value) { - this.chartTooltip.value.classList.add("hide"); - this.chartTooltip.value.classList.remove("show"); - } - if (event instanceof PointerEvent) { - TOOLTIP_SYNC.next(0); - } - xTooltipLine.attr("x1", `0`).attr("x2", `0`).attr("y1", `0`).attr("y2", `0`); - Object.values(yTooltipLine).forEach(lineElement => { - lineElement.attr("x1", `0`).attr("x2", `0`).attr("y1", `0`).attr("y2", `0`); - }); - Object.values(tooltipPoint).forEach(circlePoint => { - circlePoint.attr("cx", `0`).attr("cy", `0`).attr("r", `0`); - }); - } - }; - - if (this.tooltipSub) { - this.tooltipSub.unsubscribe(); - } - this.tooltipSub = TOOLTIP_SYNC.subscribe({ - next: (date: number) => { - if (date === 0) { - pointerleft(0); - } else { - pointermoved(date); - } - } - }); - - this.plotCustomLines(); - this.svg - .on("pointerenter pointermove", pointermoved) - .on("pointerleave", pointerleft) - .on("touchstart", (event: Event) => event.preventDefault()); - this.checkTickOverlapping(); - } - - protected updated(changedProperties: PropertyValueMap | Map): void { - super.updated(changedProperties); - void this.updateComplete.then(() => { - if (changedProperties.has("config")) { - const oldConfig = changedProperties.get("config") as FTimeseriesChartConfig | undefined; - if (oldConfig && oldConfig.data.length === this.config.data.length) { - const chartData = this.config.data.filter(s => !s.disable); - - const chartDataFlat = chartData.map(series => series.points).flat(); - this.x.domain( - d3.extent(chartDataFlat, d => d.date) as Iterable - ); - this.y.domain([0, d3.max(chartDataFlat, d => d.value)] as Iterable); - this.svg.call(g => g.selectAll(".grid-line").remove()); - this.xAxisG.call(this.xAxis); - this.xAxisG.call(this.yGridLines); - this.yAxisG.call(this.yAxis); - this.yAxisG.call(this.xGridLines); - - this.path - .data( - chartData.filter(td => td.type === "line" || td.type === "area"), - d => d.seriesName - ) - .join("path") - .attr("d", d => { - if (d.type === "line") { - return this.line(d.points); - } - if (d.type === "area") { - return this.area(d.points); - } - return "none"; - }); - - this.bars - .data( - chartData.filter(td => td.type === "bar"), - d => d.seriesName - ) - .join("g") - .each(this.seriesBars); - - this.plotCustomLines(); - } else { - this.init(); - } - - this.checkTickOverlapping(); - } - }); - } -} - -/** - * Required for typescript - */ -declare global { - export interface HTMLElementTagNameMap { - "f-timeseries-chart": FTimeseriesChart; - } -} diff --git a/packages/flow-dashboard/src/index.ts b/packages/flow-dashboard/src/index.ts deleted file mode 100644 index a65199d68..000000000 --- a/packages/flow-dashboard/src/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from "./components/f-dashboard/f-dashboard"; -export * from "./components/f-timeseries-chart/f-timeseries-chart"; -export * from "./types"; -export * from "./components/f-timeseries-chart/f-timeseries-chart-types"; diff --git a/packages/flow-dashboard/src/types.ts b/packages/flow-dashboard/src/types.ts deleted file mode 100644 index 549aeb136..000000000 --- a/packages/flow-dashboard/src/types.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { HTMLTemplateResult } from "lit"; -import { FTimeseriesChartConfig } from "./components/f-timeseries-chart/f-timeseries-chart-types"; - -export type FDashboardConfig = { - widgets: FDashboardWidget[]; -}; - -export type FDashboardWidgetGridPlacement = { - h: number; - w: number; - x?: number; - y?: number; -}; - -export type FDashboardWidgetCore = { - id: string; - placement: FDashboardWidgetGridPlacement; - data: T; - header?: - | { - title: string; - description?: string; - } - | (() => HTMLTemplateResult); - footer?: string | (() => HTMLTemplateResult); -}; - -export type FDashboardBigNumberWidget = FDashboardWidgetCore & { - type: "big-number"; - dataType?: "storage" | "time" | "count" | "currency" | "percentage"; -}; -export type FDashboardWidget = FDashboardBigNumberWidget | FDashboardTimeseriesWidget; - -export type FDashboardTimeseriesWidget = FDashboardWidgetCore & { - type: "timeseries"; -}; diff --git a/packages/flow-dashboard/tsconfig.json b/packages/flow-dashboard/tsconfig.json deleted file mode 100644 index 9b4f19797..000000000 --- a/packages/flow-dashboard/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "outDir": "./dist" - }, - "include": ["src/**/*"] -} diff --git a/packages/flow-dashboard/vite.config.ts b/packages/flow-dashboard/vite.config.ts deleted file mode 100644 index 0b591de02..000000000 --- a/packages/flow-dashboard/vite.config.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { defineConfig } from "vite"; - -export default defineConfig({ - build: { - // Disabling minification makes it easy to debug during development - // And all modern bundlers will consume the library and minify it anyway - minify: false, - sourcemap: true, - lib: { - entry: "src/index.ts", - name: "flow-dashboard", - fileName: format => `flow-dashboard.${format}.js`, - formats: ["es", "cjs"] - }, - rollupOptions: { - // If we want to publish standalone components we don't externalize lit, - // if you are going to use lit in your own project, you can make it a dep instead. - // external: /^lit/, <-- comment this line - external: ["@ollion/flow-core-config", "@ollion/flow-core", /^lit/], - output: { - globals: { - "@ollion/flow-core": "@ollion/flow-core" - } - } - } - } -}); diff --git a/packages/flow-dashboard/vite.umd.config.ts b/packages/flow-dashboard/vite.umd.config.ts deleted file mode 100644 index eee5219b6..000000000 --- a/packages/flow-dashboard/vite.umd.config.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { defineConfig } from "vite"; - -/** - * UMD build with no externals , to consume through CDN in static html files. - */ -export default defineConfig({ - build: { - sourcemap: true, - lib: { - entry: "src/index.ts", - name: "flowDashboard", - fileName: format => `flow-dashboard.${format}.js`, - formats: ["umd"] - }, - outDir: "umd" - } -}); diff --git a/packages/flow-dashboard/web-test-runner.config.mjs b/packages/flow-dashboard/web-test-runner.config.mjs deleted file mode 100644 index d410ad4ef..000000000 --- a/packages/flow-dashboard/web-test-runner.config.mjs +++ /dev/null @@ -1,5 +0,0 @@ -import { esbuildPlugin } from "@web/dev-server-esbuild"; - -export default { - plugins: [esbuildPlugin({ ts: true })] -}; diff --git a/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts b/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts index 79651dbca..53da26c26 100644 --- a/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts +++ b/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts @@ -10,7 +10,7 @@ export const checkboxGroupStyles = eleStyle; import { injectCss } from "@ollion/flow-core-config"; injectCss("f-checkbox-group", globalStyle); -@customElement("f-checkbox-group") + export class FCheckboxGroup extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts b/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts index 6a93bd519..43a4d1739 100644 --- a/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts +++ b/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts @@ -9,7 +9,6 @@ injectCss("f-field-separator", globalStyle); export type FFieldSeparatorState = FDividerState; -@customElement("f-field-separator") export class FFieldSeparator extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts b/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts index cc6f0c1ae..9fc93d2b3 100644 --- a/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts +++ b/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts @@ -33,7 +33,7 @@ export type ArrayValueType = ( | unknown[] | undefined )[]; -@customElement("f-form-array") + export class FFormArray extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts index 23f39e6d4..f3498ea65 100644 --- a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts +++ b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts @@ -32,7 +32,6 @@ import formArrayGlobalStyles from "./../f-form-array/f-form-array-global.scss?in injectCss("f-form-builder", globalStyle); -@customElement("f-form-builder") export class FFormBuilder extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts b/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts index e85d697b9..db9aa83de 100644 --- a/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts +++ b/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts @@ -28,7 +28,7 @@ export type ObjectValueType = Record< // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents string | string[] | number | number[] | unknown | unknown[] | undefined >; -@customElement("f-form-object") + export class FFormObject extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts b/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts index 6b935dda1..4bc3095ed 100644 --- a/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts +++ b/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts @@ -14,7 +14,7 @@ export const radioGroupStyles = eleStyle; /** * @summary Text component includes Headings, titles, body texts and links. */ -@customElement("f-radio-group") + export class FRadioGroup extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-form-builder/src/index.ts b/packages/flow-form-builder/src/index.ts index e8d1ac1b6..83e7cfa13 100644 --- a/packages/flow-form-builder/src/index.ts +++ b/packages/flow-form-builder/src/index.ts @@ -1,3 +1,10 @@ +import { FCheckboxGroup } from "./components/f-checkbox-group/f-checkbox-group"; +import { FRadioGroup } from "./components/f-radio-group/f-radio-group"; +import { FFormArray } from "./components/f-form-array/f-form-array"; +import { FFormObject } from "./components/f-form-object/f-form-object"; +import { FFieldSeparator } from "./components/f-field-separator/f-field-separator"; +import { FFormBuilder } from "./components/f-form-builder/f-form-builder"; + export * from "./types"; export * from "./components/f-checkbox-group/f-checkbox-group"; export * from "./components/f-radio-group/f-radio-group"; @@ -9,3 +16,12 @@ export * from "./components/f-form-builder/f-form-builder"; export { validateField } from "./modules/validation/validator"; export { html } from "lit"; + +export const flowFormBuilderElements = [ + FCheckboxGroup, + FRadioGroup, + FFormArray, + FFormObject, + FFieldSeparator, + FFormBuilder +]; diff --git a/packages/flow-form-builder/vite.config.ts b/packages/flow-form-builder/vite.config.ts index 2fdd74c08..db60e6bd9 100644 --- a/packages/flow-form-builder/vite.config.ts +++ b/packages/flow-form-builder/vite.config.ts @@ -13,7 +13,20 @@ export default defineConfig({ formats: ["es", "cjs"] }, rollupOptions: { - external: ["@ollion/flow-core-config", "@ollion/flow-core", /^lit/, "rxjs", "lodash-es"], + external: [ + /^@ollion/, + "axios", + "emoji-mart", + "lodash-es", + /^lit/, + "rxjs", + "vanilla-colorful", + "mark.js", + "@emoji-mart/data", + "@lit-labs/virtualizer", + "flatpickr", + "@floating-ui/dom" + ], output: { globals: { "@ollion/flow-core": "@ollion/flow-core" diff --git a/packages/flow-lineage/src/components/f-lineage/f-lineage.ts b/packages/flow-lineage/src/components/f-lineage/f-lineage.ts index f6e757cac..232613c2c 100644 --- a/packages/flow-lineage/src/components/f-lineage/f-lineage.ts +++ b/packages/flow-lineage/src/components/f-lineage/f-lineage.ts @@ -28,7 +28,6 @@ import { injectCss } from "@ollion/flow-core-config"; injectCss("f-lineage", globalStyle); // Renders attribute names of parent element to textContent -@customElement("f-lineage") export class FLineage extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-lineage/vite.config.ts b/packages/flow-lineage/vite.config.ts index 78d3dc16f..7aeb8834e 100644 --- a/packages/flow-lineage/vite.config.ts +++ b/packages/flow-lineage/vite.config.ts @@ -13,7 +13,21 @@ export default defineConfig({ formats: ["es", "cjs"] }, rollupOptions: { - external: ["@ollion/flow-core-config", "@ollion/flow-core", /^lit/], + external: [ + /^@ollion/, + "axios", + "emoji-mart", + "lodash-es", + /^lit/, + "rxjs", + "vanilla-colorful", + "mark.js", + "@emoji-mart/data", + "@lit-labs/virtualizer", + "flatpickr", + "@floating-ui/dom", + "d3" + ], output: { globals: { "@ollion/flow-core": "@ollion/flow-core" diff --git a/packages/flow-log/src/components/f-log/f-log.ts b/packages/flow-log/src/components/f-log/f-log.ts index c5256a633..4bc329170 100644 --- a/packages/flow-log/src/components/f-log/f-log.ts +++ b/packages/flow-log/src/components/f-log/f-log.ts @@ -5,7 +5,6 @@ import eleStyle from "./f-log.scss?inline"; import { FRoot, - flowElement, FDiv, FIcon, FText, @@ -46,7 +45,7 @@ export type FLogLevels = string[]; /** * @summary Text component includes Headings, titles, body texts and links. */ -@flowElement("f-log") + export class FLog extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-log/vite.config.ts b/packages/flow-log/vite.config.ts index 14b3d4c02..888a0d91a 100644 --- a/packages/flow-log/vite.config.ts +++ b/packages/flow-log/vite.config.ts @@ -16,7 +16,20 @@ export default defineConfig({ // If we want to publish standalone components we don't externalize lit, // if you are going to use lit in your own project, you can make it a dep instead. // external: /^lit/, <-- comment this line - external: ["@ollion/flow-core-config", "@ollion/flow-core", /^lit/, "mark.js"], + external: [ + /^@ollion/, + "axios", + "emoji-mart", + "lodash-es", + /^lit/, + "rxjs", + "vanilla-colorful", + "mark.js", + "@emoji-mart/data", + "@lit-labs/virtualizer", + "flatpickr", + "@floating-ui/dom" + ], output: { globals: { "@ollion/flow-core": "@ollion/flow-core" diff --git a/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.ts b/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.ts index 24dcb5ce7..41b8a52ff 100644 --- a/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.ts +++ b/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.ts @@ -1,5 +1,5 @@ import { unsafeCSS, html } from "lit"; -import { FRoot, flowElement } from "@ollion/flow-core"; +import { FRoot } from "@ollion/flow-core"; import globalStyle from "./f-md-editor-global.scss?inline"; import { FTextArea } from "@ollion/flow-core"; import * as showdown from "showdown"; @@ -8,7 +8,7 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { injectCss } from "@ollion/flow-core-config"; injectCss("f-md-editor", globalStyle); -@flowElement("f-md-editor") + export class FMDEditor extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-md-editor/vite.config.ts b/packages/flow-md-editor/vite.config.ts index 5129cee7f..0fc86e60c 100644 --- a/packages/flow-md-editor/vite.config.ts +++ b/packages/flow-md-editor/vite.config.ts @@ -16,7 +16,22 @@ export default defineConfig({ // If we want to publish standalone components we don't externalize lit, // if you are going to use lit in your own project, you can make it a dep instead. // external: /^lit/, <-- comment this line - external: ["@ollion/flow-core-config", "@ollion/flow-core", /^lit/, "monaco-editor"], + external: [ + /^@ollion/, + "axios", + "emoji-mart", + "lodash-es", + /^lit/, + "rxjs", + "vanilla-colorful", + "mark.js", + "@emoji-mart/data", + "@lit-labs/virtualizer", + "flatpickr", + "@floating-ui/dom", + "monaco-editor", + "showdown" + ], output: { globals: { "@ollion/flow-core": "@ollion/flow-core" diff --git a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts index 1d4e8be05..d7a6e45fe 100644 --- a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts +++ b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { FButton, FDiv, flowElement, FRoot, FSearch, FText } from "@ollion/flow-core"; +import { FButton, FDiv, FRoot, FSearch, FText } from "@ollion/flow-core"; import { html, HTMLTemplateResult, nothing, PropertyValueMap, unsafeCSS } from "lit"; import { property, query, state } from "lit/decorators.js"; import { FTable, FTableSelectable, FTableSize, FTableVariant } from "../f-table/f-table"; @@ -53,7 +53,6 @@ export type FTableSchemaSelectable = FTableSelectable; export type FTableSchemaHeaderCellemplate = (value: T) => HTMLTemplateResult; export type FTableSchemaStickyBackground = "default" | "secondary" | "tertiary" | "subtle"; -@flowElement("f-table-schema") export class FTableSchema extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-table/src/components/f-table/f-table.ts b/packages/flow-table/src/components/f-table/f-table.ts index 1eef49890..929d0270e 100644 --- a/packages/flow-table/src/components/f-table/f-table.ts +++ b/packages/flow-table/src/components/f-table/f-table.ts @@ -2,7 +2,7 @@ import { html, PropertyValueMap, unsafeCSS } from "lit"; import { property } from "lit/decorators.js"; import { FTcell } from "../f-tcell/f-tcell"; import { FTrow } from "../f-trow/f-trow"; -import { FRoot, flowElement } from "@ollion/flow-core"; +import { FRoot } from "@ollion/flow-core"; import globalStyle from "./f-table-global.scss?inline"; import { injectCss } from "@ollion/flow-core-config"; @@ -12,7 +12,6 @@ export type FTableVariant = "stripped" | "outlined" | "underlined" | "bordered"; export type FTableSize = "medium" | "small"; export type FTableSelectable = "single" | "multiple" | "none"; -@flowElement("f-table") export class FTable extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-table/src/components/f-tcell/f-tcell.ts b/packages/flow-table/src/components/f-tcell/f-tcell.ts index 3099746d3..b6c63d9f2 100644 --- a/packages/flow-table/src/components/f-tcell/f-tcell.ts +++ b/packages/flow-table/src/components/f-tcell/f-tcell.ts @@ -1,6 +1,6 @@ import { html, nothing, PropertyValueMap, unsafeCSS } from "lit"; import { property, query, state } from "lit/decorators.js"; -import { FCheckbox, FDiv, FIconButton, FIcon, FRadio, FRoot, flowElement } from "@ollion/flow-core"; +import { FCheckbox, FDiv, FIconButton, FIcon, FRadio, FRoot } from "@ollion/flow-core"; import { FTableSelectable } from "../f-table/f-table"; import eleStyle from "./f-tcell.scss?inline"; import globalStyle from "./f-tcell-global.scss?inline"; @@ -33,7 +33,6 @@ export type FTcellAlign = | "bottom-center" | "bottom-right"; -@flowElement("f-tcell") export class FTcell extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-table/src/components/f-trow/f-trow.ts b/packages/flow-table/src/components/f-trow/f-trow.ts index bb5f2ba79..6f1fb39ab 100644 --- a/packages/flow-table/src/components/f-trow/f-trow.ts +++ b/packages/flow-table/src/components/f-trow/f-trow.ts @@ -1,7 +1,7 @@ import { html, PropertyValueMap, unsafeCSS } from "lit"; import { property, query } from "lit/decorators.js"; -import { FDiv, FIcon, FRoot, flowElement, FIconButton } from "@ollion/flow-core"; +import { FDiv, FIcon, FRoot, FIconButton } from "@ollion/flow-core"; import { FTcell } from "../f-tcell/f-tcell"; import eleStyle from "./f-trow.scss?inline"; import globalStyle from "./f-trow-global.scss?inline"; @@ -19,7 +19,6 @@ export type FTrowState = | "default"; export type FTrowChevronPosition = "left" | "right"; -@flowElement("f-trow") export class FTrow extends FRoot { /** * css loaded from scss file diff --git a/packages/flow-table/src/index.ts b/packages/flow-table/src/index.ts index 65b916046..6edc8ca16 100644 --- a/packages/flow-table/src/index.ts +++ b/packages/flow-table/src/index.ts @@ -1,4 +1,11 @@ +import { FTableSchema } from "./components/f-table-schema/f-table-schema"; +import { FTable } from "./components/f-table/f-table"; +import { FTcell } from "./components/f-tcell/f-tcell"; +import { FTrow } from "./components/f-trow/f-trow"; + export * from "./components/f-table/f-table"; export * from "./components/f-trow/f-trow"; export * from "./components/f-tcell/f-tcell"; export * from "./components/f-table-schema/f-table-schema"; + +export const flowTableElements = [FTable, FTrow, FTcell, FTableSchema]; diff --git a/packages/flow-table/vite.config.ts b/packages/flow-table/vite.config.ts index dda208f44..b74710c60 100644 --- a/packages/flow-table/vite.config.ts +++ b/packages/flow-table/vite.config.ts @@ -16,7 +16,20 @@ export default defineConfig({ // If we want to publish standalone components we don't externalize lit, // if you are going to use lit in your own project, you can make it a dep instead. // external: /^lit/, <-- comment this line - external: ["@ollion/flow-core-config", "@ollion/flow-core", /^lit/], + external: [ + /^@ollion/, + "axios", + "emoji-mart", + "lodash-es", + /^lit/, + "rxjs", + "vanilla-colorful", + "mark.js", + "@emoji-mart/data", + "@lit-labs/virtualizer", + "flatpickr", + "@floating-ui/dom" + ], output: { globals: { "@ollion/flow-core": "@ollion/flow-core" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 73c2d5c77..a0b152db8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,9 +17,9 @@ importers: '@ollion/flow-core': specifier: workspace:* version: link:packages/flow-core - '@ollion/flow-dashboard': + '@ollion/flow-core-config': specifier: workspace:* - version: link:packages/flow-dashboard + version: link:packages/flow-core-config '@ollion/flow-form-builder': specifier: workspace:* version: link:packages/flow-form-builder @@ -291,6 +291,9 @@ importers: '@open-wc/testing': specifier: ^3.1.5 version: 3.2.2 + '@rollup/plugin-terser': + specifier: ^0.4.4 + version: 0.4.4 '@types/jest': specifier: 29.5.5 version: 29.5.5 @@ -324,6 +327,9 @@ importers: prettier: specifier: 2.6.2 version: 2.6.2 + rollup-plugin-visualizer: + specifier: ^5.12.0 + version: 5.12.0 sass: specifier: ^1.52.3 version: 1.69.7 @@ -353,70 +359,6 @@ importers: specifier: ^4.4.11 version: 4.5.1(sass@1.69.7) - packages/flow-dashboard: - dependencies: - '@ollion/flow-core': - specifier: workspace:* - version: link:../flow-core - '@ollion/flow-core-config': - specifier: workspace:* - version: link:../flow-core-config - axios: - specifier: ^0.27.2 - version: 0.27.2 - d3: - specifier: ^7.6.1 - version: 7.8.5 - gridstack: - specifier: ^9.5.0 - version: 9.5.1 - lit: - specifier: ^3.1.0 - version: 3.1.1 - rxjs: - specifier: ^7.8.1 - version: 7.8.1 - devDependencies: - '@custom-elements-manifest/analyzer': - specifier: ^0.5.7 - version: 0.5.7 - '@open-wc/testing': - specifier: ^3.1.5 - version: 3.2.2 - '@types/d3': - specifier: 7.4.3 - version: 7.4.3 - '@types/jest': - specifier: 29.5.5 - version: 29.5.5 - '@web/dev-server-esbuild': - specifier: ^0.4.1 - version: 0.4.4 - '@web/test-runner': - specifier: ^0.17.1 - version: 0.17.3(typescript@5.3.3) - concurrently: - specifier: ^8.2.1 - version: 8.2.2 - esbuild-sass-plugin: - specifier: 2.2.6 - version: 2.2.6 - lit-html: - specifier: ^3.1.0 - version: 3.1.1 - sass: - specifier: ^1.52.3 - version: 1.69.7 - typescript: - specifier: ^5.2.2 - version: 5.3.3 - vite: - specifier: ^4.4.11 - version: 4.5.1(sass@1.69.7) - web-component-analyzer: - specifier: ^2.0.0-next.4 - version: 2.0.0 - packages/flow-form-builder: dependencies: '@ollion/flow-core': @@ -3259,6 +3201,15 @@ packages: '@jridgewell/trace-mapping': 0.3.20 dev: true + /@jridgewell/gen-mapping@0.3.5: + resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==} + engines: {node: '>=6.0.0'} + dependencies: + '@jridgewell/set-array': 1.2.1 + '@jridgewell/sourcemap-codec': 1.4.15 + '@jridgewell/trace-mapping': 0.3.25 + dev: true + /@jridgewell/resolve-uri@3.1.1: resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==} engines: {node: '>=6.0.0'} @@ -3269,6 +3220,18 @@ packages: engines: {node: '>=6.0.0'} dev: true + /@jridgewell/set-array@1.2.1: + resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==} + engines: {node: '>=6.0.0'} + dev: true + + /@jridgewell/source-map@0.3.6: + resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==} + dependencies: + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 + dev: true + /@jridgewell/sourcemap-codec@1.4.15: resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} dev: true @@ -3280,6 +3243,13 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 dev: true + /@jridgewell/trace-mapping@0.3.25: + resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} + dependencies: + '@jridgewell/resolve-uri': 3.1.1 + '@jridgewell/sourcemap-codec': 1.4.15 + dev: true + /@jridgewell/trace-mapping@0.3.9: resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==} dependencies: @@ -4234,6 +4204,20 @@ packages: rollup: 3.29.4 dev: true + /@rollup/plugin-terser@0.4.4: + resolution: {integrity: sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + serialize-javascript: 6.0.2 + smob: 1.5.0 + terser: 5.30.4 + dev: true + /@rollup/pluginutils@3.1.0(rollup@2.79.1): resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==} engines: {node: '>= 8.0.0'} @@ -7489,6 +7473,10 @@ packages: resolution: {integrity: sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==} dev: true + /commander@2.20.3: + resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} + dev: true + /commander@6.2.1: resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==} engines: {node: '>= 6'} @@ -9611,10 +9599,6 @@ packages: resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==} dev: true - /gridstack@9.5.1: - resolution: {integrity: sha512-ZzBXY8J2dTPwVOP14d6vHhrXZMWh4qCgb+FJ1COSOrI02OtiPJtDgEQbz1rDlVR/tFU5WQP67w1RYz0eF0FkuA==} - dev: false - /gunzip-maybe@1.4.2: resolution: {integrity: sha512-4haO1M4mLO91PW57BMsDFf75UmwoRX0GkdD+Faw+Lr+r/OZrOCS0pIBwOL1xCKQqnQzbNFGgK2V2CpBUPeFNTw==} hasBin: true @@ -12665,6 +12649,12 @@ packages: resolution: {integrity: sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==} dev: true + /randombytes@2.1.0: + resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==} + dependencies: + safe-buffer: 5.2.1 + dev: true + /range-parser@1.2.1: resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==} engines: {node: '>= 0.6'} @@ -13086,6 +13076,22 @@ packages: resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==} dev: false + /rollup-plugin-visualizer@5.12.0: + resolution: {integrity: sha512-8/NU9jXcHRs7Nnj07PF2o4gjxmm9lXIrZ8r175bT9dK8qoLlvKTwRMArRCMgpMGlq8CTLugRvEmyMeMXIU2pNQ==} + engines: {node: '>=14'} + hasBin: true + peerDependencies: + rollup: 2.x || 3.x || 4.x + peerDependenciesMeta: + rollup: + optional: true + dependencies: + open: 8.4.2 + picomatch: 2.3.1 + source-map: 0.7.4 + yargs: 17.7.2 + dev: true + /rollup@2.79.1: resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==} engines: {node: '>=10.0.0'} @@ -13227,6 +13233,12 @@ packages: - supports-color dev: true + /serialize-javascript@6.0.2: + resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==} + dependencies: + randombytes: 2.1.0 + dev: true + /serve-static@1.15.0: resolution: {integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==} engines: {node: '>= 0.8.0'} @@ -13399,6 +13411,10 @@ packages: yargs: 15.4.1 dev: true + /smob@1.5.0: + resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==} + dev: true + /socks-proxy-agent@8.0.2: resolution: {integrity: sha512-8zuqoLv1aP/66PHF5TqwJ7Czm3Yv32urJQHrVyhD7mmA6d61Zv8cIXQYPTWwmg6qlupnPvs/QKDmfa4P/qct2g==} engines: {node: '>= 14'} @@ -13815,6 +13831,17 @@ packages: engines: {node: '>=8'} dev: true + /terser@5.30.4: + resolution: {integrity: sha512-xRdd0v64a8mFK9bnsKVdoNP9GQIKUAaJPTaqEQDL4w/J8WaW4sWXXoMZ+6SimPkfT5bElreXf8m9HnmPc3E1BQ==} + engines: {node: '>=10'} + hasBin: true + dependencies: + '@jridgewell/source-map': 0.3.6 + acorn: 8.11.3 + commander: 2.20.3 + source-map-support: 0.5.21 + dev: true + /test-exclude@6.0.0: resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==} engines: {node: '>=8'} diff --git a/stories/flow-dashboard/f-dashboard.stories.ts b/stories/flow-dashboard/f-dashboard.stories.ts deleted file mode 100644 index 657ae5dbf..000000000 --- a/stories/flow-dashboard/f-dashboard.stories.ts +++ /dev/null @@ -1,134 +0,0 @@ -import { Meta } from "@storybook/web-components"; -import { html } from "lit-html"; -import { - FDashboard, - FDashboardConfig, - FDashboardWidget, - FTimeseriesChartConfig -} from "@ollion/flow-dashboard"; -import { generateTimeseriesChartData } from "./mock-data-utils"; -import { faker } from "@faker-js/faker"; -import { createRef, ref } from "lit/directives/ref.js"; - -export default { - title: "@ollion/flow-dashboard/f-dashboard", - argTypes: { - field: { - control: false - } - } -} as Meta; - -const getWidgets = () => { - const iconsNames = [ - "p-azure", - "p-google", - "p-aws", - "p-hadoop", - "p-sonarcloud", - "p-snowflake", - "p-terraform", - "p-discord" - ]; - const widgets: FDashboardWidget[] = []; - const startFrom = new Date(); - for (let index = 0; index < 10; index++) { - if (index % 2 === 0) { - widgets.push({ - type: "timeseries", - data: { - data: generateTimeseriesChartData(startFrom) - }, - id: faker.string.alpha(10), - header() { - const name = faker.company.name(); - const description = faker.lorem.sentences(3); - return html` - - - ${name} - ${description} - - `; - }, - footer: () => { - const date = faker.date.recent({ refDate: new Date() }); - const state = faker.helpers.arrayElement(["danger", "success", "warning"]); - return html` - - - Last updated on ${date.toLocaleDateString()} ${date.toLocaleTimeString()} - - - `; - }, - placement: { - w: faker.number.int({ min: 4, max: 8 }), - h: faker.number.int({ min: 3, max: 4 }) - } - }); - } else { - widgets.push({ - type: "big-number", - data: faker.number.int({ min: 11, max: 999 }), - dataType: "count", - id: faker.string.alpha(10), - header: { - title: faker.company.name(), - description: faker.lorem.sentences(3) - }, - footer: `Powered by Flow`, - placement: { - w: faker.number.int({ min: 1.5, max: 3 }), - h: faker.number.int({ min: 1.5, max: 2 }) - } - }); - } - } - - return widgets; -}; -const Template = () => { - const dashboardRef = createRef(); - const dashboardConfig: FDashboardConfig = { - widgets: getWidgets() - }; - const randomize = () => { - if (dashboardRef.value) { - dashboardRef.value.config = { - widgets: getWidgets() - }; - } - }; - - return html` - - Click on randomize button to generate new data - - - - - `; -}; - -export const basic = Template.bind({}); diff --git a/stories/flow-dashboard/f-timeseries-chart.stories.ts b/stories/flow-dashboard/f-timeseries-chart.stories.ts deleted file mode 100644 index 034c63fc7..000000000 --- a/stories/flow-dashboard/f-timeseries-chart.stories.ts +++ /dev/null @@ -1,395 +0,0 @@ -import { faker } from "@faker-js/faker"; -import { - FTimeseriesChartConfig, - FTimeseriesChart, - YAxisLine, - XAxisLine, - TooltipPoints, - TimeseriesData -} from "@ollion/flow-dashboard"; -import { html } from "lit-html"; -import { createRef, ref } from "lit/directives/ref.js"; -import { generateTimeseriesChartData } from "./mock-data-utils"; - -export default { - title: "@ollion/flow-dashboard/f-timeseries-chart", - - parameters: { - controls: { - hideNoControlsWarning: true - } - } -}; - -function getXYLines(chartData: TimeseriesData[]) { - const yLines: YAxisLine[] = [ - { - value: faker.number.int({ min: 150, max: 200 }), - color: "var(--color-danger-default)" - }, - { - value: faker.number.int({ min: 50, max: 100 }), - color: "var(--color-warning-default)" - } - ]; - - const xLines: XAxisLine[] = [ - { - value: chartData[0].points[+(chartData[0].points.length / 3).toFixed(0)].date, - color: "yellow" - }, - { - value: chartData[0].points[+(chartData[0].points.length / 2).toFixed(0)].date, - color: "yellow" - } - ]; - - return { - xLines, - yLines - }; -} - -export const AllOptions = { - render: () => { - const chartData = generateTimeseriesChartData(new Date()); - const { xLines, yLines } = getXYLines(chartData); - - const chartRef = createRef(); - - const customTickValues = []; - for (let d = 0; d < 10; d++) { - const date = new Date(); - date.setMinutes(date.getMinutes() + 15 * (d + 1)); - customTickValues.push(date); - } - const chartConfig: FTimeseriesChartConfig = { - data: chartData, - xAxis: { - lines: xLines, - tickConfig: { - format: (d: Date) => { - return `${d.getHours()}h${d.getMinutes()}m`; - }, - // type: "auto" - type: "interval", - interval: { - type: "minutes", - every: 5 - } - // type: "values", - // values: customTickValues - } - }, - yAxis: { - lines: yLines, - tickConfig: { - format: (value: number) => { - return `#${value}`; - }, - type: "auto" - // type: "values", - // values: [50, 100] - } - }, - legends: { - disabled: false, - position: "bottom", - template: ({ click, mouseEnter, mouseLeave }) => { - const icons = ["i-area", "i-bar", "i-line"]; - return html` - ${chartData.map((series, idx) => { - return html` click(series.seriesName)} - @mouseenter=${() => mouseEnter(series.seriesName)} - @mouseleave=${() => mouseLeave()} - clickable - align="middle-left" - gap="small" - > - - ${series.seriesName}`; - })} - `; - } - }, - tooltipTemplate: (tooltipDate: Date, tooltipPoints: TooltipPoints) => { - return html` - ${tooltipPoints.map(point => { - return html`${point.seriesName} : ${point?.value}`; - })} - - - - ${tooltipDate.toLocaleDateString()} | ${tooltipDate.toLocaleTimeString()} - - `; - } - }; - - const interval = setInterval(() => { - const chartDataFlat = chartData.map(series => series.points).flat(); - const newPoints = generateTimeseriesChartData( - new Date(chartDataFlat[chartDataFlat.length - 1].date + 60 * 1000), - chartData.length, - 1 - ); - newPoints.forEach((element, idx) => { - const series = chartData[idx]; - series?.points.shift(); - series?.points.push(...element.points); - }); - if (chartRef.value) { - chartRef.value.config = { ...chartConfig }; - } - }, 1000); - - setTimeout(() => { - clearInterval(interval); - }, 3000); - return html` - - `; - }, - - name: "all-options" -}; - -export const CustomLegendTemplate = { - render: () => { - const chartData = generateTimeseriesChartData(new Date()); - - const chartRef = createRef(); - - const chartConfig: FTimeseriesChartConfig = { - data: chartData, - xAxis: { - tickConfig: { - format: (d: Date) => { - return `${d.getHours()}h${d.getMinutes()}m`; - }, - // type: "auto" - type: "interval", - interval: { - type: "minutes", - every: 5 - } - // type: "values", - // values: customTickValues - } - }, - yAxis: { - tickConfig: { - format: (value: number) => { - return `#${value}`; - }, - type: "auto" - // type: "values", - // values: [50, 100] - } - }, - legends: { - disabled: false, - position: "bottom", - template: ({ click, mouseEnter, mouseLeave }) => { - const icons = ["i-user", "i-home", "i-computer"]; - return html` - ${chartData.map((series, idx) => { - return html` click(series.seriesName)} - @mouseenter=${() => mouseEnter(series.seriesName)} - @mouseleave=${() => mouseLeave()} - clickable - align="middle-left" - gap="small" - > - - ${series.seriesName}`; - })} - `; - } - } - }; - return html` - - `; - }, - - name: "legends-template" -}; - -export const Lines = { - render: () => { - const chartData = generateTimeseriesChartData(new Date()); - - const { xLines, yLines } = getXYLines(chartData); - - const chartRef = createRef(); - - const chartConfig: FTimeseriesChartConfig = { - data: chartData, - xAxis: { - lines: xLines - }, - yAxis: { - lines: yLines - } - }; - - return html` - - `; - }, - - name: "x-&-y-lines" -}; - -export const CustomTooltip = { - render: () => { - const chartData = generateTimeseriesChartData(new Date()); - - const chartRef = createRef(); - - const chartConfig: FTimeseriesChartConfig = { - data: chartData, - - tooltipTemplate: (tooltipDate: Date, tooltipPoints: TooltipPoints) => { - return html` - ${tooltipPoints.map(point => { - return html`${point.seriesName} : ${point?.value}`; - })} - - - - ${tooltipDate.toLocaleDateString()} | ${tooltipDate.toLocaleTimeString()} - - `; - } - }; - - return html` - - `; - }, - - name: "tooltip-template" -}; - -export const TickFormat = { - render: () => { - const chartData = generateTimeseriesChartData(new Date()); - - const chartRef = createRef(); - - const chartConfig: FTimeseriesChartConfig = { - data: chartData, - xAxis: { - tickConfig: { - format: (d: Date) => { - return `${d.getHours()}h${d.getMinutes()}m`; - }, - type: "auto" - } - }, - yAxis: { - tickConfig: { - format: (value: number) => { - return `#${value}`; - }, - type: "auto" - } - } - }; - - return html` - - `; - }, - - name: "tick-format" -}; - -export const Realtime = { - render: () => { - const chartData = generateTimeseriesChartData(new Date()); - - const { xLines, yLines } = getXYLines(chartData); - - const chartRef = createRef(); - - const chartConfig: FTimeseriesChartConfig = { - data: chartData, - xAxis: { - lines: xLines - }, - yAxis: { - lines: yLines - } - }; - - const interval = setInterval(() => { - const chartDataFlat = chartData.map(series => series.points).flat(); - const newPoints = generateTimeseriesChartData( - new Date(chartDataFlat[chartDataFlat.length - 1].date + 60 * 1000), - chartData.length, - 1 - ); - newPoints.forEach((element, idx) => { - const series = chartData[idx]; - series?.points.shift(); - series?.points.push(...element.points); - }); - if (chartRef.value) { - chartRef.value.config = { ...chartConfig }; - } - }, 1000); - - setTimeout(() => { - clearInterval(interval); - }, 60000 * 60); - return html` - - `; - }, - - name: "realtime-data" -}; diff --git a/stories/flow-dashboard/mock-data-utils.ts b/stories/flow-dashboard/mock-data-utils.ts deleted file mode 100644 index a0463b197..000000000 --- a/stories/flow-dashboard/mock-data-utils.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { TimeseriesData, TimeseriesPoint } from "@ollion/flow-dashboard"; -import { faker } from "@faker-js/faker"; - -export function getColor() { - return "#" + Math.floor(faker.number.float({ min: 0, max: 1 }) * 16777215).toString(16); -} - -export function generateTimeseriesChartData( - from?: Date, - seriesCount?: number, - pointsCount?: number -): TimeseriesData[] { - const startFrom = new Date().getTime(); - const masterData: TimeseriesData[] = []; - - const numberOfPoints = pointsCount ?? 150; //faker.number.int({ min: 50, max: 150 }); - const numberOfSeries = seriesCount ?? faker.number.int({ min: 1, max: 3 }); - const colors = [ - "#66c2ff", - "#ff6666", - "#99ff99", - "#ffb366", - "#cc99ff", - "#99ccff", - "#ffcc99", - "#66ff99", - "#ff99cc", - "#ccccff" - ]; - const seriesColors = faker.helpers.arrayElements(colors, numberOfSeries); - for (let j = 0; j < numberOfSeries; j++) { - const startDate = from ? from.getTime() : startFrom; - const points: TimeseriesPoint[] = []; - for (let i = 0; i < numberOfPoints; i++) { - const currentDate = startDate + i * 60 * 1000; - let fluctuatingValue = Math.floor(faker.number.float({ min: 0, max: 1 }) * 10) + 50 * (j + 1); //faker.number.float({ min: 0, max: 1 }) * (yOffSet ?? 100) + Math.sin(i / 8) * 50; // Adding a sine wave for fluctuation - if (fluctuatingValue < 0) { - fluctuatingValue *= -1; - } - if (fluctuatingValue % 9 === 0) { - fluctuatingValue = 50 * (j + 1) * getRndInteger(1, 2); - } - const dataPoint: TimeseriesPoint = { - date: currentDate, - value: +fluctuatingValue.toFixed(0) - }; - - points.push(dataPoint); - } - masterData.push({ - seriesName: faker.location.country(), - points, - color: seriesColors[j], - type: faker.helpers.arrayElement(["line", "bar", "area"]) - }); - } - - return masterData; -} - -export function getRndInteger(min: number, max: number) { - return faker.number.int({ min, max }); -} diff --git a/tsconfig.json b/tsconfig.json index ae807553e..01838750c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -27,9 +27,6 @@ { "path": "./packages/flow-table" }, - { - "path": "./packages/flow-dashboard" - }, { "path": "./packages/flow-md-editor" } From 8243230fe636b3c29e4bd43a2ef4dc49345528e3 Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Mon, 29 Apr 2024 16:58:32 +0530 Subject: [PATCH 02/13] manual-register manually regitering elements instead of automatic --- .../src/components/f-field-separator/f-field-separator.ts | 2 +- .../src/components/f-form-builder/f-form-builder.ts | 2 +- .../src/components/f-form-object/f-form-object.ts | 2 +- .../src/components/f-radio-group/f-radio-group.ts | 2 +- packages/flow-lineage/src/components/f-lineage/f-lineage.ts | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts b/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts index 43a4d1739..b57e09b58 100644 --- a/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts +++ b/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts @@ -1,5 +1,5 @@ import { html, nothing, unsafeCSS } from "lit"; -import { customElement, property } from "lit/decorators.js"; +import { property } from "lit/decorators.js"; import { FRoot, FDivider, FDividerState, FText, FDiv } from "@ollion/flow-core"; import eleStyle from "./f-field-separator.scss?inline"; import globalStyle from "./f-field-separator-global.scss?inline"; diff --git a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts index f3498ea65..ef8720cb4 100644 --- a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts +++ b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts @@ -1,5 +1,5 @@ import { html, nothing, PropertyValueMap, unsafeCSS } from "lit"; -import { customElement, property } from "lit/decorators.js"; +import { property } from "lit/decorators.js"; import { FormBuilderField, FFormInputElements, diff --git a/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts b/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts index db9aa83de..d8072bdad 100644 --- a/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts +++ b/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts @@ -1,5 +1,5 @@ import { html, nothing, PropertyValueMap, TemplateResult, unsafeCSS } from "lit"; -import { customElement, property, query } from "lit/decorators.js"; +import { property, query } from "lit/decorators.js"; import { FDiv, FRoot } from "@ollion/flow-core"; import eleStyle from "./f-form-object.scss?inline"; import globalStyle from "./f-form-object-global.scss?inline"; diff --git a/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts b/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts index 4bc3095ed..3fa1c962b 100644 --- a/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts +++ b/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts @@ -1,6 +1,6 @@ // import { FRoot } from "@ollion/flow-core"; import { html, PropertyValueMap, unsafeCSS } from "lit"; -import { customElement, property } from "lit/decorators.js"; +import { property } from "lit/decorators.js"; import { RadioOption, RadioOptions } from "../../types"; import eleStyle from "./f-radio-group.scss?inline"; import globalStyle from "./f-radio-group-global.scss?inline"; diff --git a/packages/flow-lineage/src/components/f-lineage/f-lineage.ts b/packages/flow-lineage/src/components/f-lineage/f-lineage.ts index 232613c2c..efab76e08 100644 --- a/packages/flow-lineage/src/components/f-lineage/f-lineage.ts +++ b/packages/flow-lineage/src/components/f-lineage/f-lineage.ts @@ -1,5 +1,5 @@ import { html, PropertyValues, render, unsafeCSS } from "lit"; -import { customElement, property, query, queryAssignedElements } from "lit/decorators.js"; +import { property, query, queryAssignedElements } from "lit/decorators.js"; import eleStyle from "./f-lineage.scss?inline"; import globalStyle from "./f-lineage-global.scss?inline"; import * as d3 from "d3"; From 83c734c02ae403f2fc7dafe454df394e64d3ff28 Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Mon, 29 Apr 2024 16:59:46 +0530 Subject: [PATCH 03/13] manual-register manually regitering elements instead of automatic --- .../src/components/f-checkbox-group/f-checkbox-group.ts | 2 +- .../src/components/f-form-array/f-form-array.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts b/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts index 53da26c26..04b2ce286 100644 --- a/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts +++ b/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts @@ -1,5 +1,5 @@ import { html, unsafeCSS } from "lit"; -import { customElement, property } from "lit/decorators.js"; +import { property } from "lit/decorators.js"; import { CheckboxOption, CheckboxOptions } from "../../types"; import eleStyle from "./f-checkbox-group.scss?inline"; import globalStyle from "./f-checkbox-group-global.scss?inline"; diff --git a/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts b/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts index 9fc93d2b3..75be90846 100644 --- a/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts +++ b/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import { html, nothing, PropertyValueMap, unsafeCSS } from "lit"; -import { customElement, property, queryAll } from "lit/decorators.js"; +import { property, queryAll } from "lit/decorators.js"; import { FDiv, FRoot, injectCss } from "@ollion/flow-core"; import eleStyle from "./f-form-array.scss?inline"; import { From 3a659e837ff886b2b7f43c5ee78b7f6ec6ba33ef Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Mon, 29 Apr 2024 17:15:46 +0530 Subject: [PATCH 04/13] manual-register manually regitering elements instead of automatic --- .../components/f-field/f-field-global.scss | 2 +- .../src/components/f-field/f-field.scss | 2 +- .../src/components/f-field/f-field.ts | 10 +---- .../components/f-icon-button/f-icon-button.ts | 23 +++++----- .../flow-core/src/components/f-icon/f-icon.ts | 5 +-- .../src/components/f-input/f-input-light.ts | 42 ++++++++----------- .../src/components/f-input/f-input.ts | 11 +++-- .../src/components/f-pictogram/f-pictogram.ts | 25 +++++------ .../f-progress-bar/f-progress-bar.ts | 11 ++--- packages/flow-core/src/index.ts | 6 ++- 10 files changed, 58 insertions(+), 79 deletions(-) diff --git a/packages/flow-core/src/components/f-field/f-field-global.scss b/packages/flow-core/src/components/f-field/f-field-global.scss index 66dcf996a..2654383ac 100644 --- a/packages/flow-core/src/components/f-field/f-field-global.scss +++ b/packages/flow-core/src/components/f-field/f-field-global.scss @@ -2,7 +2,7 @@ f-field { width: 100%; - &[data-variant="inline"] { + &[variant="inline"] { flex: 0 0 auto; width: fit-content; } diff --git a/packages/flow-core/src/components/f-field/f-field.scss b/packages/flow-core/src/components/f-field/f-field.scss index bf66d3d4f..c96f9cdf6 100644 --- a/packages/flow-core/src/components/f-field/f-field.scss +++ b/packages/flow-core/src/components/f-field/f-field.scss @@ -55,7 +55,7 @@ $sizes: ( } } - &[data-variant="inline"] { + &[variant="inline"] { display: inline-flex; flex-direction: row; width: fit-content; diff --git a/packages/flow-core/src/components/f-field/f-field.ts b/packages/flow-core/src/components/f-field/f-field.ts index c22de3a0d..ae76c754f 100644 --- a/packages/flow-core/src/components/f-field/f-field.ts +++ b/packages/flow-core/src/components/f-field/f-field.ts @@ -7,7 +7,6 @@ import eleStyle from "./f-field.scss?inline"; import globalStyle from "./f-field-global.scss?inline"; import { injectCss } from "@ollion/flow-core-config"; -import { ifDefined } from "lit/directives/if-defined.js"; injectCss("f-field", globalStyle); export type FFieldStateProp = "default" | "primary" | "success" | "danger" | "warning"; @@ -78,13 +77,8 @@ export class FField extends FRoot { direction="column" class="f-field-wrapper" gap="small" - data-variant=${ifDefined(this.variant)} - >
+ variant=${this.variant} + >
${this.description diff --git a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts index 157667d8f..155d4bc07 100644 --- a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts +++ b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts @@ -15,16 +15,15 @@ import getCustomFillColor from "../../utils/get-custom-fill-color"; import LightenDarkenColor from "../../utils/get-lighten-darken-color"; import { injectCss } from "@ollion/flow-core-config"; -import { ifDefined } from "lit/directives/if-defined.js"; injectCss("f-icon-button", globalStyle); const variants = ["round", "curved", "block"] as const; const categories = ["fill", "outline", "transparent", "packed"] as const; const sizes = ["large", "medium", "small", "x-small"] as const; -export type FIconButtonVariant = (typeof variants)[number]; -export type FIconButtonType = (typeof categories)[number]; -export type FIconButtonSize = (typeof sizes)[number]; +export type FIconButtonVariant = typeof variants[number]; +export type FIconButtonType = typeof categories[number]; +export type FIconButtonSize = typeof sizes[number]; export type FIconButtonState = | "primary" | "danger" @@ -84,8 +83,8 @@ export class FIconButton extends FRoot { /** * @attribute Counter property enables a counter on the button. */ - @property({ reflect: true, type: String }) - counter?: string; + @property({ reflect: true, type: [String, Number] }) + counter?: string | number; /** * @attribute Loader icon replaces the content of the button . @@ -269,17 +268,17 @@ export class FIconButton extends FRoot { return html` ${this.loading ? unsafeSVG(loader) : ""} - ${unsafeSVG(loader)} -
`; + loadingIcon = html`
${unsafeSVG(loader)}
`; } return html`
${this.passwordToggle}${clearIcon}${computedSuffix} @@ -165,35 +162,32 @@ export class FInputLight extends FInputBase { /** * Final html to render */ - return html`
${this.prefixTemplate} ${this.suffixTemplate} diff --git a/packages/flow-core/src/components/f-input/f-input.ts b/packages/flow-core/src/components/f-input/f-input.ts index 1a5b5ec64..f30dddba8 100644 --- a/packages/flow-core/src/components/f-input/f-input.ts +++ b/packages/flow-core/src/components/f-input/f-input.ts @@ -4,8 +4,7 @@ import globalStyle from "./f-input-global.scss?inline"; import { FText } from "../f-text/f-text"; import { FDiv } from "../f-div/f-div"; import { FIcon } from "../f-icon/f-icon"; -import { ifDefined } from "lit/directives/if-defined.js"; - +import { ifDefined } from "lit-html/directives/if-defined.js"; import { injectCss } from "@ollion/flow-core-config"; import { FInputBase, FInputCustomEvent } from "./f-input-base"; import { FInputLight } from "./f-input-light"; @@ -142,10 +141,10 @@ export class FInput extends FInputBase { .loading=${this.loading} .clear=${this.clear} .suffixWhen=${this.suffixWhen} - aria-label="${ifDefined(this.getAttribute("aria-label") ?? undefined)}" - data-qa-element-id=${ifDefined(this.getAttribute("data-qa-element-id") ?? undefined)} - .autofocus=${Boolean(this.getAttribute("autofocus"))} - autocomplete=${ifDefined(this.getAttribute("autocomplete") ?? undefined)} + aria-label="${this.getAttribute("aria-label")}" + data-qa-element-id=${this.getAttribute("data-qa-element-id")} + autofocus=${ifDefined(this.getAttribute("autofocus"))} + autocomplete=${ifDefined(this.getAttribute("autocomplete"))} .maxLength=${this.maxLength} @input=${(e: CustomEvent) => this.updateValue(e)} > diff --git a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts index e2d8ac38a..975291ae5 100644 --- a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts +++ b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts @@ -7,7 +7,6 @@ import { ConfigUtil, injectCss } from "@ollion/flow-core-config"; import { getTextContrast, isValidHttpUrl } from "./../../utils"; import { classMap } from "lit-html/directives/class-map.js"; import { FIcon } from "../f-icon/f-icon"; -import { ifDefined } from "lit/directives/if-defined.js"; injectCss("f-pictogram", globalStyle); @@ -16,10 +15,10 @@ const category = ["fill", "outline"] as const; const sizes = ["x-large", "large", "medium", "small"] as const; const states = ["primary", "danger", "warning", "success", "default", "inherit"] as const; -export type FPictogramVariant = (typeof variants)[number]; -export type FPictogramCategory = (typeof category)[number]; -export type FPictogramSize = (typeof sizes)[number]; -export type FPictogramState = (typeof states)[number]; +export type FPictogramVariant = typeof variants[number]; +export type FPictogramCategory = typeof category[number]; +export type FPictogramSize = typeof sizes[number]; +export type FPictogramState = typeof states[number]; let colors = [ "#FFB900", @@ -178,7 +177,7 @@ export class FPictogram extends FRoot { const svg = IconPack[this.source]; if (svg) { return html` + return html`

${this.textSource}

`; } @@ -283,10 +278,10 @@ export class FPictogram extends FRoot { return html`
- + `; @@ -208,7 +203,7 @@ export class FProgressBar extends FRoot { this.valueInNumber > 50 ? 1 : 2, html`
` ); diff --git a/packages/flow-core/src/index.ts b/packages/flow-core/src/index.ts index 3937288cd..d6d0b8490 100644 --- a/packages/flow-core/src/index.ts +++ b/packages/flow-core/src/index.ts @@ -168,10 +168,14 @@ export const flowCoreElements = [ ]; export function register(elements: (new () => LitElement)[]) { elements.forEach(element => { - const tagName = element.name.replace( + let tagName = element.name.replace( /[A-Z]/g, (match, offset) => (offset > 0 ? "-" : "") + match.toLowerCase() ); + if (element.name === "FMDEditor") { + tagName = "f-md-editor"; + } + if (!customElements.get(tagName)) customElements.define(tagName, element); }); } From 6fbc66e1d2dfd980cc7aa8984c096c0c3c269c0f Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Mon, 29 Apr 2024 17:16:24 +0530 Subject: [PATCH 05/13] manual-register manually regitering elements instead of automatic --- .../src/components/f-icon-button/f-icon-button.ts | 6 +++--- .../flow-core/src/components/f-pictogram/f-pictogram.ts | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts index 155d4bc07..75e36930e 100644 --- a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts +++ b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts @@ -21,9 +21,9 @@ const variants = ["round", "curved", "block"] as const; const categories = ["fill", "outline", "transparent", "packed"] as const; const sizes = ["large", "medium", "small", "x-small"] as const; -export type FIconButtonVariant = typeof variants[number]; -export type FIconButtonType = typeof categories[number]; -export type FIconButtonSize = typeof sizes[number]; +export type FIconButtonVariant = (typeof variants)[number]; +export type FIconButtonType = (typeof categories)[number]; +export type FIconButtonSize = (typeof sizes)[number]; export type FIconButtonState = | "primary" | "danger" diff --git a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts index 975291ae5..988b6b267 100644 --- a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts +++ b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts @@ -15,10 +15,10 @@ const category = ["fill", "outline"] as const; const sizes = ["x-large", "large", "medium", "small"] as const; const states = ["primary", "danger", "warning", "success", "default", "inherit"] as const; -export type FPictogramVariant = typeof variants[number]; -export type FPictogramCategory = typeof category[number]; -export type FPictogramSize = typeof sizes[number]; -export type FPictogramState = typeof states[number]; +export type FPictogramVariant = (typeof variants)[number]; +export type FPictogramCategory = (typeof category)[number]; +export type FPictogramSize = (typeof sizes)[number]; +export type FPictogramState = (typeof states)[number]; let colors = [ "#FFB900", From 280bdfba444aee4235c8dc322aa42fc0614616dc Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Mon, 29 Apr 2024 17:42:37 +0530 Subject: [PATCH 06/13] manual-register tests updated --- .storybook/code-sandbox.js | 3 ++- README.md | 6 ++++-- packages/flow-code-editor/README.md | 5 +++-- packages/flow-core/README.md | 6 ++++-- .../src/components/f-accordion/f-accordion.test.ts | 3 ++- .../src/components/f-breadcrumb/f-breadcrumb.test.ts | 3 ++- .../src/components/f-button/f-button.test.ts | 3 ++- .../src/components/f-carousel/f-carousel.test.ts | 3 ++- .../src/components/f-checkbox/f-checkbox.test.ts | 3 ++- .../components/f-color-picker/f-color-picker.test.ts | 3 ++- .../src/components/f-counter/f-counter.test.ts | 3 ++- .../f-date-time-picker/f-date-time-picker.test.ts | 3 ++- .../flow-core/src/components/f-div/f-div.test.ts | 3 ++- .../src/components/f-divider/f-divider.test.ts | 3 ++- .../components/f-emoji-picker/f-emoji-picker.test.ts | 3 ++- .../components/f-file-upload/f-file-upload.test.ts | 3 ++- .../src/components/f-form-group/f-form-group.test.ts | 3 ++- .../flow-core/src/components/f-form/f-form.test.ts | 3 ++- .../flow-core/src/components/f-grid/f-grid.test.ts | 3 ++- .../components/f-icon-button/f-icon-button.test.ts | 3 ++- .../flow-core/src/components/f-icon/f-icon.test.ts | 3 ++- .../flow-core/src/components/f-input/f-input.test.ts | 3 ++- .../src/components/f-pictogram/f-pictogram.test.ts | 3 ++- .../src/components/f-popover/f-popover.test.ts | 3 ++- .../components/f-progress-bar/f-progress-bar.test.ts | 3 ++- .../flow-core/src/components/f-radio/f-radio.test.ts | 3 ++- .../src/components/f-search/f-search.test.ts | 3 ++- .../src/components/f-select/f-select.test.ts | 3 ++- .../src/components/f-spacer/f-spacer.test.ts | 3 ++- .../src/components/f-suggest/f-suggest.test.ts | 3 ++- .../src/components/f-switch/f-switch.test.ts | 3 ++- .../components/f-tab-content/f-tab-content.test.ts | 3 ++- .../src/components/f-tab-node/f-tab-node.test.ts | 3 ++- .../flow-core/src/components/f-tab/f-tab.test.ts | 3 ++- .../flow-core/src/components/f-tag/f-tag.test.ts | 3 ++- .../src/components/f-template/f-template.test.ts | 3 ++- .../src/components/f-text-area/f-text-area.test.ts | 3 ++- .../flow-core/src/components/f-text/f-text.test.ts | 3 ++- .../flow-core/src/components/f-toast/f-toast.test.ts | 3 ++- .../src/components/f-tooltip/f-tooltip.test.ts | 3 ++- packages/flow-form-builder/README.md | 5 +++-- .../components/f-form-builder/f-form-builder.test.ts | 4 +++- packages/flow-lineage/README.md | 12 ++++++++---- packages/flow-log/README.md | 6 ++++-- packages/flow-log/src/components/f-log/f-log.test.ts | 3 ++- packages/flow-md-editor/README.md | 6 ++++-- .../src/components/f-md-editor/f-md-editor.test.ts | 6 +++--- packages/flow-table/README.md | 6 ++++-- .../components/f-table-schema/f-table-schema.test.ts | 4 +++- .../src/components/f-table/f-table.test.ts | 4 +++- .../src/components/f-tcell/f-tcell.test.ts | 4 +++- .../flow-table/src/components/f-trow/f-trow.test.ts | 4 +++- stories/flow-form-builder/about.mdx | 5 +++-- stories/flow-lineage/introduction/about.mdx | 5 +++-- 54 files changed, 134 insertions(+), 68 deletions(-) diff --git a/.storybook/code-sandbox.js b/.storybook/code-sandbox.js index 1553d2e38..7d7b6a4ba 100644 --- a/.storybook/code-sandbox.js +++ b/.storybook/code-sandbox.js @@ -4,7 +4,8 @@ export function getCodeSandBoxUrl(story) { const params = getParameters({ files: { "index.js": { - content: `import "@ollion/flow-core"; + content: `import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements);; import "@ollion/flow-system-icon"; document.getElementById("app").innerHTML =\`${story}\` `, diff --git a/README.md b/README.md index 72512854b..9562e1daf 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,8 @@ _Note:_ after installation re-start your application. Copy and import the below snippet into your startup file. In **VueJS:** (src/main.ts or main.js), **Angular:** (src/main.ts), **React:** (src/index.tsx or index.jsx) ```JavaScript -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); ```
@@ -98,7 +99,8 @@ npm i --save @ollion/flow-system-icon ### 2️⃣ Import the icon pack ```javascript -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import "@ollion/flow-system-icon"; ``` diff --git a/packages/flow-code-editor/README.md b/packages/flow-code-editor/README.md index 3c5e7361e..625305a2f 100644 --- a/packages/flow-code-editor/README.md +++ b/packages/flow-code-editor/README.md @@ -19,8 +19,9 @@ npm i --save @ollion/flow-code-editor Paste the below snippet in your project and add your application startup/runtime code to it. ```javascript -import "@ollion/flow-core"; -import "@ollion/flow-code-editor"; +import { register, flowCoreElements } from "@ollion/flow-core"; +import { FCodeEditor } from "@ollion/flow-code-editor"; +register([...flowCoreElements, FCodeEditor]); ```
diff --git a/packages/flow-core/README.md b/packages/flow-core/README.md index 72512854b..9562e1daf 100644 --- a/packages/flow-core/README.md +++ b/packages/flow-core/README.md @@ -56,7 +56,8 @@ _Note:_ after installation re-start your application. Copy and import the below snippet into your startup file. In **VueJS:** (src/main.ts or main.js), **Angular:** (src/main.ts), **React:** (src/index.tsx or index.jsx) ```JavaScript -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); ```
@@ -98,7 +99,8 @@ npm i --save @ollion/flow-system-icon ### 2️⃣ Import the icon pack ```javascript -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import "@ollion/flow-system-icon"; ``` diff --git a/packages/flow-core/src/components/f-accordion/f-accordion.test.ts b/packages/flow-core/src/components/f-accordion/f-accordion.test.ts index beca995e1..5a4a2e76b 100644 --- a/packages/flow-core/src/components/f-accordion/f-accordion.test.ts +++ b/packages/flow-core/src/components/f-accordion/f-accordion.test.ts @@ -1,6 +1,7 @@ import { html, fixture, expect } from "@open-wc/testing"; // importing flow-core components -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // setting icon pack for testing icon related test cases diff --git a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.test.ts b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.test.ts index da33f95b5..ec6ee535c 100644 --- a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.test.ts +++ b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.test.ts @@ -2,7 +2,8 @@ import { html, fixture, expect } from "@open-wc/testing"; import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // importing flow-core components -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FBreadcrumb, ConfigUtil } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-button/f-button.test.ts b/packages/flow-core/src/components/f-button/f-button.test.ts index 7c12a50a2..d937e8eca 100644 --- a/packages/flow-core/src/components/f-button/f-button.test.ts +++ b/packages/flow-core/src/components/f-button/f-button.test.ts @@ -2,7 +2,8 @@ import { html, fixture, expect } from "@open-wc/testing"; import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FButton, FIcon, ConfigUtil, FCounter } from "@ollion/flow-core"; // importing `loadingSVG` to cross check diff --git a/packages/flow-core/src/components/f-carousel/f-carousel.test.ts b/packages/flow-core/src/components/f-carousel/f-carousel.test.ts index 85931904e..176fdeaf8 100644 --- a/packages/flow-core/src/components/f-carousel/f-carousel.test.ts +++ b/packages/flow-core/src/components/f-carousel/f-carousel.test.ts @@ -3,7 +3,8 @@ import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; import FCarouselExample from "./i-fcarousel-example"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { ConfigUtil, FCarousel } from "@ollion/flow-core"; import { html } from "lit"; diff --git a/packages/flow-core/src/components/f-checkbox/f-checkbox.test.ts b/packages/flow-core/src/components/f-checkbox/f-checkbox.test.ts index fc42cee64..50fc2a18f 100644 --- a/packages/flow-core/src/components/f-checkbox/f-checkbox.test.ts +++ b/packages/flow-core/src/components/f-checkbox/f-checkbox.test.ts @@ -1,7 +1,8 @@ import { html, fixture, expect } from "@open-wc/testing"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FCheckbox } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-color-picker/f-color-picker.test.ts b/packages/flow-core/src/components/f-color-picker/f-color-picker.test.ts index e99536d7a..f5de1c9af 100644 --- a/packages/flow-core/src/components/f-color-picker/f-color-picker.test.ts +++ b/packages/flow-core/src/components/f-color-picker/f-color-picker.test.ts @@ -1,7 +1,8 @@ import { html, fixture, expect } from "@open-wc/testing"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FColorPicker, FInput } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-counter/f-counter.test.ts b/packages/flow-core/src/components/f-counter/f-counter.test.ts index 670fedd24..500e9bb48 100644 --- a/packages/flow-core/src/components/f-counter/f-counter.test.ts +++ b/packages/flow-core/src/components/f-counter/f-counter.test.ts @@ -2,7 +2,8 @@ import { html, fixture, expect } from "@open-wc/testing"; // importing `loadingSVG` to cross check import loadingSVG from "./../../mixins/svg/loader"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FCounter } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.test.ts b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.test.ts index d41c48a1f..eb8f75bde 100644 --- a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.test.ts +++ b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.test.ts @@ -2,7 +2,8 @@ import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; import { expect, fixture, html, oneEvent } from "@open-wc/testing"; // importing flow-core components -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { ConfigUtil, FDateTimePicker } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-div/f-div.test.ts b/packages/flow-core/src/components/f-div/f-div.test.ts index 62dcb6003..d94628548 100644 --- a/packages/flow-core/src/components/f-div/f-div.test.ts +++ b/packages/flow-core/src/components/f-div/f-div.test.ts @@ -1,6 +1,7 @@ import { html, fixture, expect } from "@open-wc/testing"; -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FDiv } from "@ollion/flow-core"; describe("f-div", () => { diff --git a/packages/flow-core/src/components/f-divider/f-divider.test.ts b/packages/flow-core/src/components/f-divider/f-divider.test.ts index cadfe0e50..0d6c0d1dc 100644 --- a/packages/flow-core/src/components/f-divider/f-divider.test.ts +++ b/packages/flow-core/src/components/f-divider/f-divider.test.ts @@ -1,6 +1,7 @@ import { html, fixture, expect } from "@open-wc/testing"; // importing flow-core components -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FDivider } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.test.ts b/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.test.ts index 5167a0061..ab016180b 100644 --- a/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.test.ts +++ b/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.test.ts @@ -2,7 +2,8 @@ import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; import { expect, fixture, html } from "@open-wc/testing"; // importing flow-core components -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { ConfigUtil, FEmojiPicker, FIcon } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-file-upload/f-file-upload.test.ts b/packages/flow-core/src/components/f-file-upload/f-file-upload.test.ts index 0b662b71b..bd21ac333 100644 --- a/packages/flow-core/src/components/f-file-upload/f-file-upload.test.ts +++ b/packages/flow-core/src/components/f-file-upload/f-file-upload.test.ts @@ -2,7 +2,8 @@ import { html, fixture, expect } from "@open-wc/testing"; import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { ConfigUtil, FText, FFileUpload, FDiv } from "@ollion/flow-core"; // importing `loadingSVG` to cross check diff --git a/packages/flow-core/src/components/f-form-group/f-form-group.test.ts b/packages/flow-core/src/components/f-form-group/f-form-group.test.ts index aada854c0..069a68be6 100644 --- a/packages/flow-core/src/components/f-form-group/f-form-group.test.ts +++ b/packages/flow-core/src/components/f-form-group/f-form-group.test.ts @@ -1,6 +1,7 @@ import { html, fixture, expect } from "@open-wc/testing"; -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FFormGroup } from "@ollion/flow-core"; describe("f-form-group", () => { diff --git a/packages/flow-core/src/components/f-form/f-form.test.ts b/packages/flow-core/src/components/f-form/f-form.test.ts index 42bb824b3..06446290b 100644 --- a/packages/flow-core/src/components/f-form/f-form.test.ts +++ b/packages/flow-core/src/components/f-form/f-form.test.ts @@ -1,6 +1,7 @@ import { html, fixture, expect } from "@open-wc/testing"; -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FForm } from "@ollion/flow-core"; describe("f-form", () => { diff --git a/packages/flow-core/src/components/f-grid/f-grid.test.ts b/packages/flow-core/src/components/f-grid/f-grid.test.ts index 90582054f..ebe98ec33 100644 --- a/packages/flow-core/src/components/f-grid/f-grid.test.ts +++ b/packages/flow-core/src/components/f-grid/f-grid.test.ts @@ -1,6 +1,7 @@ import { html, fixture, expect } from "@open-wc/testing"; // importing flow-core components -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FGrid } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-icon-button/f-icon-button.test.ts b/packages/flow-core/src/components/f-icon-button/f-icon-button.test.ts index b342b63a5..02ed88254 100644 --- a/packages/flow-core/src/components/f-icon-button/f-icon-button.test.ts +++ b/packages/flow-core/src/components/f-icon-button/f-icon-button.test.ts @@ -3,7 +3,8 @@ import { html, fixture, expect } from "@open-wc/testing"; // IconPack to test import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FIconButton, ConfigUtil } from "@ollion/flow-core"; ConfigUtil.setConfig({ iconPack: IconPack }); diff --git a/packages/flow-core/src/components/f-icon/f-icon.test.ts b/packages/flow-core/src/components/f-icon/f-icon.test.ts index 325a4c2bc..15ccc5293 100644 --- a/packages/flow-core/src/components/f-icon/f-icon.test.ts +++ b/packages/flow-core/src/components/f-icon/f-icon.test.ts @@ -4,7 +4,8 @@ import notFound from "../../mixins/svg/not-found"; import { ConfigUtil } from "@ollion/flow-core-config"; // import all flow -core components -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FIcon } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-input/f-input.test.ts b/packages/flow-core/src/components/f-input/f-input.test.ts index 7370d7cfd..68a9d7802 100644 --- a/packages/flow-core/src/components/f-input/f-input.test.ts +++ b/packages/flow-core/src/components/f-input/f-input.test.ts @@ -2,7 +2,8 @@ import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; import { expect, fixture, html } from "@open-wc/testing"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { ConfigUtil, FIcon, FInput, FText } from "@ollion/flow-core"; // importing `loadingSVG` to cross check diff --git a/packages/flow-core/src/components/f-pictogram/f-pictogram.test.ts b/packages/flow-core/src/components/f-pictogram/f-pictogram.test.ts index 5d2a6c47f..707544571 100644 --- a/packages/flow-core/src/components/f-pictogram/f-pictogram.test.ts +++ b/packages/flow-core/src/components/f-pictogram/f-pictogram.test.ts @@ -1,6 +1,7 @@ import { html, fixture, expect } from "@open-wc/testing"; import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FPictogram, ConfigUtil } from "@ollion/flow-core"; ConfigUtil.setConfig({ iconPack: IconPack }); diff --git a/packages/flow-core/src/components/f-popover/f-popover.test.ts b/packages/flow-core/src/components/f-popover/f-popover.test.ts index d51c09472..f535570d9 100644 --- a/packages/flow-core/src/components/f-popover/f-popover.test.ts +++ b/packages/flow-core/src/components/f-popover/f-popover.test.ts @@ -1,6 +1,7 @@ import { expect, fixture, html } from "@open-wc/testing"; -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FPopover } from "@ollion/flow-core"; describe("f-popover", () => { diff --git a/packages/flow-core/src/components/f-progress-bar/f-progress-bar.test.ts b/packages/flow-core/src/components/f-progress-bar/f-progress-bar.test.ts index 30610d503..e554d3a0b 100644 --- a/packages/flow-core/src/components/f-progress-bar/f-progress-bar.test.ts +++ b/packages/flow-core/src/components/f-progress-bar/f-progress-bar.test.ts @@ -1,7 +1,8 @@ import { html, fixture, expect } from "@open-wc/testing"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FProgressBar } from "@ollion/flow-core"; describe("f-progress-bar", () => { diff --git a/packages/flow-core/src/components/f-radio/f-radio.test.ts b/packages/flow-core/src/components/f-radio/f-radio.test.ts index 50707d205..fcbd17330 100644 --- a/packages/flow-core/src/components/f-radio/f-radio.test.ts +++ b/packages/flow-core/src/components/f-radio/f-radio.test.ts @@ -1,7 +1,8 @@ import { html, fixture, expect } from "@open-wc/testing"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FRadio } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-search/f-search.test.ts b/packages/flow-core/src/components/f-search/f-search.test.ts index 8d19aacdc..d0ebd1ee3 100644 --- a/packages/flow-core/src/components/f-search/f-search.test.ts +++ b/packages/flow-core/src/components/f-search/f-search.test.ts @@ -2,7 +2,8 @@ import { expect, fixture, oneEvent } from "@open-wc/testing"; import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { ConfigUtil, FDiv, FSearch, FSuggest } from "@ollion/flow-core"; import { html } from "lit"; diff --git a/packages/flow-core/src/components/f-select/f-select.test.ts b/packages/flow-core/src/components/f-select/f-select.test.ts index d155088c9..30a9c2c29 100644 --- a/packages/flow-core/src/components/f-select/f-select.test.ts +++ b/packages/flow-core/src/components/f-select/f-select.test.ts @@ -2,7 +2,8 @@ import { html, fixture, expect } from "@open-wc/testing"; import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FIcon, ConfigUtil, FSelect, FText, FTag, FCheckbox } from "@ollion/flow-core"; // setting icon pack for testing icon related test cases diff --git a/packages/flow-core/src/components/f-spacer/f-spacer.test.ts b/packages/flow-core/src/components/f-spacer/f-spacer.test.ts index b1cf1f217..2628caf50 100644 --- a/packages/flow-core/src/components/f-spacer/f-spacer.test.ts +++ b/packages/flow-core/src/components/f-spacer/f-spacer.test.ts @@ -1,5 +1,6 @@ import { html, fixture, expect } from "@open-wc/testing"; -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FSpacer } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-suggest/f-suggest.test.ts b/packages/flow-core/src/components/f-suggest/f-suggest.test.ts index 61801683c..0743953a6 100644 --- a/packages/flow-core/src/components/f-suggest/f-suggest.test.ts +++ b/packages/flow-core/src/components/f-suggest/f-suggest.test.ts @@ -2,7 +2,8 @@ import { expect, fixture, oneEvent } from "@open-wc/testing"; import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { ConfigUtil, FDiv, FSuggest } from "@ollion/flow-core"; import { html } from "lit"; diff --git a/packages/flow-core/src/components/f-switch/f-switch.test.ts b/packages/flow-core/src/components/f-switch/f-switch.test.ts index 9b9d646fe..4d365fd52 100644 --- a/packages/flow-core/src/components/f-switch/f-switch.test.ts +++ b/packages/flow-core/src/components/f-switch/f-switch.test.ts @@ -1,7 +1,8 @@ import { html, fixture, expect } from "@open-wc/testing"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FSwitch } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-tab-content/f-tab-content.test.ts b/packages/flow-core/src/components/f-tab-content/f-tab-content.test.ts index c8cb6fd22..e6a75ff35 100644 --- a/packages/flow-core/src/components/f-tab-content/f-tab-content.test.ts +++ b/packages/flow-core/src/components/f-tab-content/f-tab-content.test.ts @@ -1,5 +1,6 @@ import { expect } from "@open-wc/testing"; -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FTabContent } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-tab-node/f-tab-node.test.ts b/packages/flow-core/src/components/f-tab-node/f-tab-node.test.ts index 75f6ffa25..87cdbd64d 100644 --- a/packages/flow-core/src/components/f-tab-node/f-tab-node.test.ts +++ b/packages/flow-core/src/components/f-tab-node/f-tab-node.test.ts @@ -1,5 +1,6 @@ import { expect } from "@open-wc/testing"; -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FTabNode } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-tab/f-tab.test.ts b/packages/flow-core/src/components/f-tab/f-tab.test.ts index f8faa321b..5db687479 100644 --- a/packages/flow-core/src/components/f-tab/f-tab.test.ts +++ b/packages/flow-core/src/components/f-tab/f-tab.test.ts @@ -1,5 +1,6 @@ import { html, fixture, expect } from "@open-wc/testing"; -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FTab } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-tag/f-tag.test.ts b/packages/flow-core/src/components/f-tag/f-tag.test.ts index 8dc8a7423..0cc9d1832 100644 --- a/packages/flow-core/src/components/f-tag/f-tag.test.ts +++ b/packages/flow-core/src/components/f-tag/f-tag.test.ts @@ -2,7 +2,8 @@ import { html, fixture, expect } from "@open-wc/testing"; import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FTag, FIcon, ConfigUtil, FCounter } from "@ollion/flow-core"; // importing `loadingSVG` to cross check diff --git a/packages/flow-core/src/components/f-template/f-template.test.ts b/packages/flow-core/src/components/f-template/f-template.test.ts index cc4a02818..68997728c 100644 --- a/packages/flow-core/src/components/f-template/f-template.test.ts +++ b/packages/flow-core/src/components/f-template/f-template.test.ts @@ -1,5 +1,6 @@ import { expect } from "@open-wc/testing"; -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FTemplate } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-text-area/f-text-area.test.ts b/packages/flow-core/src/components/f-text-area/f-text-area.test.ts index 0cf9e4e0d..5ba8296c5 100644 --- a/packages/flow-core/src/components/f-text-area/f-text-area.test.ts +++ b/packages/flow-core/src/components/f-text-area/f-text-area.test.ts @@ -2,7 +2,8 @@ import { html, fixture, expect } from "@open-wc/testing"; import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FIcon, ConfigUtil, FTextArea } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-text/f-text.test.ts b/packages/flow-core/src/components/f-text/f-text.test.ts index c4af9469c..ec0dd836a 100644 --- a/packages/flow-core/src/components/f-text/f-text.test.ts +++ b/packages/flow-core/src/components/f-text/f-text.test.ts @@ -1,6 +1,7 @@ import { html, fixture, expect } from "@open-wc/testing"; -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FText } from "@ollion/flow-core"; describe("f-text", () => { diff --git a/packages/flow-core/src/components/f-toast/f-toast.test.ts b/packages/flow-core/src/components/f-toast/f-toast.test.ts index 2780726d4..572b04daa 100644 --- a/packages/flow-core/src/components/f-toast/f-toast.test.ts +++ b/packages/flow-core/src/components/f-toast/f-toast.test.ts @@ -2,7 +2,8 @@ import { html, fixture, expect } from "@open-wc/testing"; import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FIcon, ConfigUtil, FToast } from "@ollion/flow-core"; diff --git a/packages/flow-core/src/components/f-tooltip/f-tooltip.test.ts b/packages/flow-core/src/components/f-tooltip/f-tooltip.test.ts index a44ab3163..a99869c3b 100644 --- a/packages/flow-core/src/components/f-tooltip/f-tooltip.test.ts +++ b/packages/flow-core/src/components/f-tooltip/f-tooltip.test.ts @@ -1,6 +1,7 @@ import { html, fixture, expect } from "@open-wc/testing"; -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FTooltip } from "@ollion/flow-core"; describe("f-tooltip", () => { diff --git a/packages/flow-form-builder/README.md b/packages/flow-form-builder/README.md index 8e41aed3a..ea1b8874a 100644 --- a/packages/flow-form-builder/README.md +++ b/packages/flow-form-builder/README.md @@ -77,8 +77,9 @@ npm i --save @ollion/flow-form-builder Paste the below snippet in your project and add your application startup/runtime code to it. ```javascript -import "@ollion/flow-core"; -import "@ollion/flow-form-builder"; +import { register, flowCoreElements } from "@ollion/flow-core"; +import { flowFormBuilderElements } from "@ollion/flow-form-builder"; +register([...flowCoreElements, ...flowFormBuilderElements]); ```
diff --git a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.test.ts b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.test.ts index bf6d52ca9..677d773ba 100644 --- a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.test.ts +++ b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.test.ts @@ -1,7 +1,9 @@ import { html, fixture, expect, oneEvent } from "@open-wc/testing"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +import { flowFormBuilderElements } from "@ollion/flow-form-builder"; +register([...flowCoreElements, ...flowFormBuilderElements]); import "@ollion/flow-system-icon"; import { FFormArray, FFormBuilder, FFormObject } from "../../../"; diff --git a/packages/flow-lineage/README.md b/packages/flow-lineage/README.md index a56b419b8..7505cd26c 100644 --- a/packages/flow-lineage/README.md +++ b/packages/flow-lineage/README.md @@ -45,8 +45,10 @@ npm i --save @ollion/flow-lineage Paste the below snippet in your project and add your application startup/runtime code to it. ```javascript -import "@ollion/flow-core"; -import "@ollion/flow-lineage"; +import { register, flowCoreElements } from "@ollion/flow-core"; +import { FLineage } from "@ollion/flow-lineage"; + +register([...flowCoreElements, FLineage]); ```
Example @@ -54,10 +56,12 @@ import "@ollion/flow-lineage"; **VueJS:** In the following example, I imported `@ollion/flow-core` and then imported the rest of the flow packages including `@ollion/flow-lineage` and after that startup code was added for VueJs `createApp(App).use(router).mount(“#app”);`. ```javascript -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +import { FLineage } from "@ollion/flow-lineage"; + +register([...flowCoreElements, FLineage]); import "@ollion/flow-system-icon"; import "@ollion/flow-product-icon"; -import "@ollion/flow-lineage"; createApp(App).use(router).mount("#app"); //runtime ``` diff --git a/packages/flow-log/README.md b/packages/flow-log/README.md index df556c852..dbfdd1be2 100644 --- a/packages/flow-log/README.md +++ b/packages/flow-log/README.md @@ -19,8 +19,10 @@ npm i --save @ollion/flow-log Paste the below snippet in your project and add your application startup/runtime code to it. ```javascript -import "@ollion/flow-core"; -import "@ollion/flow-log"; +import { register, flowCoreElements } from "@ollion/flow-core"; +import { FLog } from "@ollion/flow-log"; + +register([...flowCoreElements, FLog]); ```
diff --git a/packages/flow-log/src/components/f-log/f-log.test.ts b/packages/flow-log/src/components/f-log/f-log.test.ts index cee5adf61..1769e69c8 100644 --- a/packages/flow-log/src/components/f-log/f-log.test.ts +++ b/packages/flow-log/src/components/f-log/f-log.test.ts @@ -3,7 +3,8 @@ import { html, fixture, expect } from "@open-wc/testing"; import samplelogs from "./sample-logs"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); import { FLog } from "@ollion/flow-log"; import { FDiv } from "@ollion/flow-core"; diff --git a/packages/flow-md-editor/README.md b/packages/flow-md-editor/README.md index b68f4a1b5..6c5048eea 100644 --- a/packages/flow-md-editor/README.md +++ b/packages/flow-md-editor/README.md @@ -19,8 +19,10 @@ npm i --save @ollion/flow-md-editor Paste the below snippet in your project and add your application startup/runtime code to it. ```javascript -import "@ollion/flow-core"; -import "@ollion/flow-md-editor"; +import { register, flowCoreElements } from "@ollion/flow-core"; +import { FMDEditor } from "@ollion/flow-md-editor"; + +register([...flowCoreElements, FMDEditor]); ```
diff --git a/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.test.ts b/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.test.ts index f2f8ea740..8fd2d01f9 100644 --- a/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.test.ts +++ b/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.test.ts @@ -3,10 +3,10 @@ import { expect, fixture, html } from "@open-wc/testing"; import sampleMd from "./sample-md"; // import flow-core elements -import "@ollion/flow-core"; - -import { ConfigUtil } from "@ollion/flow-core"; +import { register, flowCoreElements, ConfigUtil } from "@ollion/flow-core"; import { FMDEditor } from "@ollion/flow-md-editor"; + +register([...flowCoreElements, FMDEditor]); ConfigUtil.setConfig({ iconPack: IconPack }); describe("f-md-editor", () => { diff --git a/packages/flow-table/README.md b/packages/flow-table/README.md index f6a2916d6..c956e8e73 100644 --- a/packages/flow-table/README.md +++ b/packages/flow-table/README.md @@ -19,8 +19,10 @@ npm i --save @ollion/flow-table Paste the below snippet in your project and add your application startup/runtime code to it. ```javascript -import "@ollion/flow-core"; -import "@ollion/flow-table"; +import { register, flowCoreElements } from "@ollion/flow-core"; +import { flowTableElements } from "@ollion/flow-table"; + +register([...flowCoreElements, ...flowTableElements]); ```
diff --git a/packages/flow-table/src/components/f-table-schema/f-table-schema.test.ts b/packages/flow-table/src/components/f-table-schema/f-table-schema.test.ts index 73d1a8a7e..0c32fbe4f 100644 --- a/packages/flow-table/src/components/f-table-schema/f-table-schema.test.ts +++ b/packages/flow-table/src/components/f-table-schema/f-table-schema.test.ts @@ -1,7 +1,9 @@ import { html, fixture, expect } from "@open-wc/testing"; import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +import { flowTableElements } from "@ollion/flow-table"; +register([...flowCoreElements, ...flowTableElements]); import { ConfigUtil, FDiv } from "@ollion/flow-core"; import { diff --git a/packages/flow-table/src/components/f-table/f-table.test.ts b/packages/flow-table/src/components/f-table/f-table.test.ts index a210a246a..4a3dd8e82 100644 --- a/packages/flow-table/src/components/f-table/f-table.test.ts +++ b/packages/flow-table/src/components/f-table/f-table.test.ts @@ -2,7 +2,9 @@ import { html, fixture, expect } from "@open-wc/testing"; import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +import { flowTableElements } from "@ollion/flow-table"; +register([...flowCoreElements, ...flowTableElements]); import { ConfigUtil, FCheckbox } from "@ollion/flow-core"; import { FTable, FTcell } from "@ollion/flow-table"; diff --git a/packages/flow-table/src/components/f-tcell/f-tcell.test.ts b/packages/flow-table/src/components/f-tcell/f-tcell.test.ts index 3239b7262..13246a37c 100644 --- a/packages/flow-table/src/components/f-tcell/f-tcell.test.ts +++ b/packages/flow-table/src/components/f-tcell/f-tcell.test.ts @@ -2,7 +2,9 @@ import { html, fixture, expect } from "@open-wc/testing"; import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +import { flowTableElements } from "@ollion/flow-table"; +register([...flowCoreElements, ...flowTableElements]); import { ConfigUtil, FIconButton } from "@ollion/flow-core"; import { FTcell, FTable } from "@ollion/flow-table"; diff --git a/packages/flow-table/src/components/f-trow/f-trow.test.ts b/packages/flow-table/src/components/f-trow/f-trow.test.ts index b07a433f8..693ff49f2 100644 --- a/packages/flow-table/src/components/f-trow/f-trow.test.ts +++ b/packages/flow-table/src/components/f-trow/f-trow.test.ts @@ -2,7 +2,9 @@ import { html, fixture, expect } from "@open-wc/testing"; import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // import flow-core elements -import "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; +import { flowTableElements } from "@ollion/flow-table"; +register([...flowCoreElements, ...flowTableElements]); import { ConfigUtil } from "@ollion/flow-core"; import { FTrow, FTable } from "@ollion/flow-table"; diff --git a/stories/flow-form-builder/about.mdx b/stories/flow-form-builder/about.mdx index 2f99647d8..53b61f43a 100644 --- a/stories/flow-form-builder/about.mdx +++ b/stories/flow-form-builder/about.mdx @@ -108,8 +108,9 @@ import "@ollion/flow-form-builder/dist/style.css"; Paste the below snippet in your project and add your application startup/runtime code to it. ```javascript -import "@ollion/flow-core"; -import "@ollion/flow-form-builder"; +import { register, flowCoreElements } from "@ollion/flow-core"; +import { flowFormBuilderElements } from "@ollion/flow-form-builder"; +register([...flowCoreElements, ...flowFormBuilderElements]); ```
diff --git a/stories/flow-lineage/introduction/about.mdx b/stories/flow-lineage/introduction/about.mdx index 897e0683d..c668ec494 100644 --- a/stories/flow-lineage/introduction/about.mdx +++ b/stories/flow-lineage/introduction/about.mdx @@ -45,8 +45,9 @@ import "@ollion/flow-lineage/dist/style.css"; `import` lineage after `@ollion/flow-core` like below. In **VueJS:** (src/main.ts or main.js), **Angular:** (src/main.ts), **React:** (src/index.tsx or index.jsx) ```javascript -import "@ollion/flow-core"; -import "@ollion/flow-lineage"; +import { register, flowCoreElements } from "@ollion/flow-core"; +import { FLineage } from "@ollion/flow-lineage"; +register([...flowCoreElements, FLineage]); ``` #### Step 4 : If your project is typescript enabled then you will need to include import types From 062e1f4c7f4fd915eb85d1af52f355b4c9accd05 Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Mon, 29 Apr 2024 20:12:17 +0530 Subject: [PATCH 07/13] manual-register tagName static attribute added --- .storybook/code-sandbox.js | 2 +- packages/flow-core/package.json | 2 +- .../components/f-accordion/f-accordion.test.ts | 4 ++-- .../src/components/f-accordion/f-accordion.ts | 1 + .../src/components/f-breadcrumb/f-breadcrumb.ts | 5 +++-- .../flow-core/src/components/f-button/f-button.ts | 1 + .../f-carousel-content/f-carousel-content.ts | 1 + .../src/components/f-carousel/f-carousel.ts | 1 + .../src/components/f-checkbox/f-checkbox.ts | 1 + .../components/f-color-picker/f-color-picker.ts | 1 + .../components/f-countdown/f-countdown.test.ts | 3 ++- .../src/components/f-countdown/f-countdown.ts | 9 +++++---- .../src/components/f-counter/f-counter.ts | 1 + .../f-date-time-picker/f-date-time-picker.ts | 1 + packages/flow-core/src/components/f-div/f-div.ts | 1 + .../src/components/f-divider/f-divider.ts | 1 + .../f-document-viewer/f-document-viewer.test.ts | 6 +++++- .../f-document-viewer/f-document-viewer.ts | 1 + .../components/f-emoji-picker/f-emoji-picker.ts | 1 + .../flow-core/src/components/f-field/f-field.ts | 1 + .../src/components/f-file-upload/f-file-upload.ts | 1 + .../src/components/f-form-field/f-form-field.ts | 1 + .../src/components/f-form-group/f-form-group.ts | 1 + .../flow-core/src/components/f-form/f-form.ts | 1 + .../flow-core/src/components/f-grid/f-grid.ts | 1 + .../src/components/f-icon-button/f-icon-button.ts | 7 ++++--- .../flow-core/src/components/f-icon/f-icon.ts | 1 + .../src/components/f-input/f-input-light.ts | 1 + .../flow-core/src/components/f-input/f-input.ts | 1 + .../src/components/f-pictogram/f-pictogram.ts | 9 +++++---- .../src/components/f-popover/f-popover.ts | 1 + .../components/f-progress-bar/f-progress-bar.ts | 1 + .../flow-core/src/components/f-radio/f-radio.ts | 1 + .../flow-core/src/components/f-search/f-search.ts | 1 + .../flow-core/src/components/f-select/f-select.ts | 1 + .../flow-core/src/components/f-spacer/f-spacer.ts | 1 + .../src/components/f-suggest/f-suggest.ts | 1 + .../flow-core/src/components/f-switch/f-switch.ts | 1 + .../src/components/f-tab-content/f-tab-content.ts | 1 + .../src/components/f-tab-node/f-tab-node.ts | 1 + packages/flow-core/src/components/f-tab/f-tab.ts | 1 + packages/flow-core/src/components/f-tag/f-tag.ts | 1 + .../src/components/f-template/f-template.ts | 1 + .../src/components/f-text-area/f-text-area.ts | 1 + .../flow-core/src/components/f-text/f-text.ts | 1 + .../flow-core/src/components/f-toast/f-toast.ts | 1 + .../src/components/f-tooltip/f-tooltip.ts | 1 + packages/flow-core/src/index.ts | 15 +++++++-------- packages/flow-core/vite.config.ts | 1 - .../f-checkbox-group/f-checkbox-group.ts | 1 + .../f-field-separator/f-field-separator.ts | 1 + .../src/components/f-form-array/f-form-array.ts | 1 + .../components/f-form-builder/f-form-builder.ts | 1 + .../src/components/f-form-object/f-form-object.ts | 1 + .../src/components/f-radio-group/f-radio-group.ts | 1 + .../src/components/f-lineage/f-lineage.test.ts | 4 ++++ .../src/components/f-lineage/f-lineage.ts | 1 + .../flow-log/src/components/f-log/f-log.test.ts | 4 +++- packages/flow-log/src/components/f-log/f-log.ts | 1 + .../components/f-md-editor/f-md-editor.test.ts | 4 +--- .../src/components/f-md-editor/f-md-editor.ts | 1 + packages/flow-md-editor/vite.config.ts | 3 +-- .../components/f-table-schema/f-table-schema.ts | 1 + .../flow-table/src/components/f-table/f-table.ts | 1 + .../flow-table/src/components/f-tcell/f-tcell.ts | 1 + .../flow-table/src/components/f-trow/f-trow.ts | 1 + 66 files changed, 95 insertions(+), 34 deletions(-) diff --git a/.storybook/code-sandbox.js b/.storybook/code-sandbox.js index 7d7b6a4ba..a5afe291a 100644 --- a/.storybook/code-sandbox.js +++ b/.storybook/code-sandbox.js @@ -5,7 +5,7 @@ export function getCodeSandBoxUrl(story) { files: { "index.js": { content: `import { register, flowCoreElements } from "@ollion/flow-core"; -register(flowCoreElements);; +register(flowCoreElements); import "@ollion/flow-system-icon"; document.getElementById("app").innerHTML =\`${story}\` `, diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json index d3aada947..8180b287c 100644 --- a/packages/flow-core/package.json +++ b/packages/flow-core/package.json @@ -13,7 +13,7 @@ "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" && wca analyze src --format vscode --outFile html.html-data.json", "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch", "test": "web-test-runner ./src/**/*.test.ts --node-resolve --port 8090 --concurrency 1", - "test:file": " web-test-runner --node-resolve --port 8090 --concurrency 1", + "test:file": " web-test-runner --node-resolve --port 8090 --concurrency 1 --debug", "test:watch": "pnpm run build && web-test-runner ./src/**/*.test.ts --node-resolve --watch --port 8090 --concurrency 1" }, "keywords": [ diff --git a/packages/flow-core/src/components/f-accordion/f-accordion.test.ts b/packages/flow-core/src/components/f-accordion/f-accordion.test.ts index 5a4a2e76b..9a09857a3 100644 --- a/packages/flow-core/src/components/f-accordion/f-accordion.test.ts +++ b/packages/flow-core/src/components/f-accordion/f-accordion.test.ts @@ -1,11 +1,11 @@ import { html, fixture, expect } from "@open-wc/testing"; // importing flow-core components -import { register, flowCoreElements } from "@ollion/flow-core"; +import { register, flowCoreElements, FAccordion, FIconButton, ConfigUtil } from "@ollion/flow-core"; + register(flowCoreElements); import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // setting icon pack for testing icon related test cases -import { FAccordion, FIconButton, ConfigUtil } from "@ollion/flow-core"; ConfigUtil.setConfig({ iconPack: IconPack }); describe("f-accordion", () => { diff --git a/packages/flow-core/src/components/f-accordion/f-accordion.ts b/packages/flow-core/src/components/f-accordion/f-accordion.ts index 21012df27..44c786950 100644 --- a/packages/flow-core/src/components/f-accordion/f-accordion.ts +++ b/packages/flow-core/src/components/f-accordion/f-accordion.ts @@ -18,6 +18,7 @@ export type FAccordionCustomEvent = { export type FAccordionPadding = FDivPaddingProp; export class FAccordion extends FRoot { + static tagName = "f-accordion"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts index ba178db44..ef0cdeb60 100644 --- a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts +++ b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts @@ -17,10 +17,11 @@ const sizes = ["medium", "small"] as const; export type FBreadCrumbsProp = { tabIndex: number; title: string; icon?: string }; export type FBreadcrumbs = FBreadCrumbsProp[]; -export type FBreadcrumbSize = (typeof sizes)[number]; -export type FBreadcrumbVariant = (typeof variants)[number]; +export type FBreadcrumbSize = typeof sizes[number]; +export type FBreadcrumbVariant = typeof variants[number]; export class FBreadcrumb extends FRoot { + static tagName = "f-breadcrumb"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-button/f-button.ts b/packages/flow-core/src/components/f-button/f-button.ts index f9f95138d..2ec2e7ae4 100644 --- a/packages/flow-core/src/components/f-button/f-button.ts +++ b/packages/flow-core/src/components/f-button/f-button.ts @@ -32,6 +32,7 @@ injectCss("f-button", globalStyle); */ export class FButton extends FRoot { + static tagName = "f-button"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-carousel-content/f-carousel-content.ts b/packages/flow-core/src/components/f-carousel-content/f-carousel-content.ts index b96071895..244222321 100644 --- a/packages/flow-core/src/components/f-carousel-content/f-carousel-content.ts +++ b/packages/flow-core/src/components/f-carousel-content/f-carousel-content.ts @@ -9,6 +9,7 @@ import { injectCss } from "@ollion/flow-core-config"; injectCss("f-carousel-content", globalStyle); export class FCarouselContent extends FRoot { + static tagName = "f-carousel-content"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-carousel/f-carousel.ts b/packages/flow-core/src/components/f-carousel/f-carousel.ts index bd94e7b55..d4b930fde 100644 --- a/packages/flow-core/src/components/f-carousel/f-carousel.ts +++ b/packages/flow-core/src/components/f-carousel/f-carousel.ts @@ -12,6 +12,7 @@ import { injectCss } from "@ollion/flow-core-config"; injectCss("f-carousel", globalStyle); export class FCarousel extends FRoot { + static tagName = "f-carousel"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-checkbox/f-checkbox.ts b/packages/flow-core/src/components/f-checkbox/f-checkbox.ts index 1671dfd2f..b501b195c 100644 --- a/packages/flow-core/src/components/f-checkbox/f-checkbox.ts +++ b/packages/flow-core/src/components/f-checkbox/f-checkbox.ts @@ -19,6 +19,7 @@ export type FCheckboxCustomEvent = { }; export class FCheckbox extends FRoot { + static tagName = "f-checkbox"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-color-picker/f-color-picker.ts b/packages/flow-core/src/components/f-color-picker/f-color-picker.ts index 1c5ce14ea..f5541bb2b 100644 --- a/packages/flow-core/src/components/f-color-picker/f-color-picker.ts +++ b/packages/flow-core/src/components/f-color-picker/f-color-picker.ts @@ -20,6 +20,7 @@ export type FColorPickerInputEvent = { }; export class FColorPicker extends FRoot { + static tagName = "f-color-picker"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-countdown/f-countdown.test.ts b/packages/flow-core/src/components/f-countdown/f-countdown.test.ts index c7b1530d5..764c89341 100644 --- a/packages/flow-core/src/components/f-countdown/f-countdown.test.ts +++ b/packages/flow-core/src/components/f-countdown/f-countdown.test.ts @@ -3,7 +3,8 @@ import { html, fixture, expect } from "@open-wc/testing"; import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; // setting icon pack for testing icon related test cases -import { FCountdown, ConfigUtil, FDiv } from "@ollion/flow-core"; +import { FCountdown, ConfigUtil, FDiv, registerAll } from "@ollion/flow-core"; +registerAll(); ConfigUtil.setConfig({ iconPack: IconPack }); diff --git a/packages/flow-core/src/components/f-countdown/f-countdown.ts b/packages/flow-core/src/components/f-countdown/f-countdown.ts index 471ebcda4..790a7416b 100644 --- a/packages/flow-core/src/components/f-countdown/f-countdown.ts +++ b/packages/flow-core/src/components/f-countdown/f-countdown.ts @@ -16,13 +16,14 @@ const sizes = ["large", "medium", "small", "x-small"] as const; const categories = ["fill", "outline"] as const; const placements = ["left", "right", "bottom", "top", "none"] as const; -export type FCountdownStateProp = (typeof states)[number]; -export type FCountdownCategoryProp = (typeof categories)[number]; -export type FCountdownSizesProp = (typeof sizes)[number]; -export type FCountdownLabelProp = (typeof placements)[number]; +export type FCountdownStateProp = typeof states[number]; +export type FCountdownCategoryProp = typeof categories[number]; +export type FCountdownSizesProp = typeof sizes[number]; +export type FCountdownLabelProp = typeof placements[number]; export type FCountdownDuration = number | string; export class FCountdown extends FRoot { + static tagName = "f-countdown"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-counter/f-counter.ts b/packages/flow-core/src/components/f-counter/f-counter.ts index 7f23b4630..2b9e942c4 100644 --- a/packages/flow-core/src/components/f-counter/f-counter.ts +++ b/packages/flow-core/src/components/f-counter/f-counter.ts @@ -26,6 +26,7 @@ export type FCounterStateProp = | `custom, ${string}`; export class FCounter extends FRoot { + static tagName = "f-counter"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts index a04d508ca..75f5803b2 100644 --- a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts +++ b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts @@ -24,6 +24,7 @@ export type DateDisableType = DateLimit[]; export type FDateOption = DateOption; export class FDateTimePicker extends FRoot { + static tagName = "f-date-time-picker"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-div/f-div.ts b/packages/flow-core/src/components/f-div/f-div.ts index 141722d35..57e106447 100644 --- a/packages/flow-core/src/components/f-div/f-div.ts +++ b/packages/flow-core/src/components/f-div/f-div.ts @@ -106,6 +106,7 @@ injectCss("f-div", globalStyle); */ export class FDiv extends FRoot { + static tagName = "f-div"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-divider/f-divider.ts b/packages/flow-core/src/components/f-divider/f-divider.ts index 138b5cd68..e246333b8 100644 --- a/packages/flow-core/src/components/f-divider/f-divider.ts +++ b/packages/flow-core/src/components/f-divider/f-divider.ts @@ -12,6 +12,7 @@ injectCss("f-divider", globalStyle); export type FDividerState = "default" | "secondary" | "subtle" | `custom, ${string}`; export class FDivider extends FRoot { + static tagName = "f-divider"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-document-viewer/f-document-viewer.test.ts b/packages/flow-core/src/components/f-document-viewer/f-document-viewer.test.ts index e3785940e..4f4e7d995 100644 --- a/packages/flow-core/src/components/f-document-viewer/f-document-viewer.test.ts +++ b/packages/flow-core/src/components/f-document-viewer/f-document-viewer.test.ts @@ -7,8 +7,12 @@ import { FAccordion, FDiv, FText, - FSearch + FSearch, + registerAll } from "@ollion/flow-core"; + +registerAll(); + import { faker } from "@faker-js/faker"; export default function getFakeDocumentContent(items = 2, levels = 2): FDocViewerContent { diff --git a/packages/flow-core/src/components/f-document-viewer/f-document-viewer.ts b/packages/flow-core/src/components/f-document-viewer/f-document-viewer.ts index 2d50da3de..6718d11cf 100644 --- a/packages/flow-core/src/components/f-document-viewer/f-document-viewer.ts +++ b/packages/flow-core/src/components/f-document-viewer/f-document-viewer.ts @@ -43,6 +43,7 @@ export type FDocumentStatement = { export type FDocViewerContent = Record; export class FDocumentViewer extends FRoot { + static tagName = "f-document-viewer"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts b/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts index ff240d8c7..4dabcfbb0 100644 --- a/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts +++ b/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts @@ -57,6 +57,7 @@ export type RecentEmojis = string[]; export type ExcludeEmojis = string[]; export class FEmojiPicker extends FRoot { + static tagName = "f-emoji-picker"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-field/f-field.ts b/packages/flow-core/src/components/f-field/f-field.ts index ae76c754f..f9260ae4e 100644 --- a/packages/flow-core/src/components/f-field/f-field.ts +++ b/packages/flow-core/src/components/f-field/f-field.ts @@ -15,6 +15,7 @@ export type FFieldStateProp = "default" | "primary" | "success" | "danger" | "wa */ export class FField extends FRoot { + static tagName = "f-field"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-file-upload/f-file-upload.ts b/packages/flow-core/src/components/f-file-upload/f-file-upload.ts index adade3fe7..1b9600e20 100644 --- a/packages/flow-core/src/components/f-file-upload/f-file-upload.ts +++ b/packages/flow-core/src/components/f-file-upload/f-file-upload.ts @@ -30,6 +30,7 @@ export type FFileUploadSizeProp = | `${number} TB`; export class FFileUpload extends FRoot { + static tagName = "f-file-upload"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-form-field/f-form-field.ts b/packages/flow-core/src/components/f-form-field/f-form-field.ts index 0fe05964f..1104f67f1 100644 --- a/packages/flow-core/src/components/f-form-field/f-form-field.ts +++ b/packages/flow-core/src/components/f-form-field/f-form-field.ts @@ -4,6 +4,7 @@ import { FRoot } from "../../mixins/components/f-root/f-root"; import { FDiv } from "../f-div/f-div"; export class FFormField extends FRoot { + static tagName = "f-form-field"; static styles = [...FDiv.styles]; render() { /** diff --git a/packages/flow-core/src/components/f-form-group/f-form-group.ts b/packages/flow-core/src/components/f-form-group/f-form-group.ts index cba15dfa1..9d47641c1 100644 --- a/packages/flow-core/src/components/f-form-group/f-form-group.ts +++ b/packages/flow-core/src/components/f-form-group/f-form-group.ts @@ -21,6 +21,7 @@ export type FGroupLabel = { */ export class FFormGroup extends FRoot { + static tagName = "f-form-group"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-form/f-form.ts b/packages/flow-core/src/components/f-form/f-form.ts index ce7d373b5..7ccba826f 100644 --- a/packages/flow-core/src/components/f-form/f-form.ts +++ b/packages/flow-core/src/components/f-form/f-form.ts @@ -17,6 +17,7 @@ injectCss("f-form", globalStyle); */ export class FForm extends FRoot { + static tagName = "f-form"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-grid/f-grid.ts b/packages/flow-core/src/components/f-grid/f-grid.ts index 02b3dce0c..50a414142 100644 --- a/packages/flow-core/src/components/f-grid/f-grid.ts +++ b/packages/flow-core/src/components/f-grid/f-grid.ts @@ -10,6 +10,7 @@ injectCss("f-grid", globalStyle); export type FGridBodyHeightProp = `${number}px` | `${number}%` | `${number}vh`; export class FGrid extends FRoot { + static tagName = "f-grid"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts index 75e36930e..726819ce7 100644 --- a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts +++ b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts @@ -21,9 +21,9 @@ const variants = ["round", "curved", "block"] as const; const categories = ["fill", "outline", "transparent", "packed"] as const; const sizes = ["large", "medium", "small", "x-small"] as const; -export type FIconButtonVariant = (typeof variants)[number]; -export type FIconButtonType = (typeof categories)[number]; -export type FIconButtonSize = (typeof sizes)[number]; +export type FIconButtonVariant = typeof variants[number]; +export type FIconButtonType = typeof categories[number]; +export type FIconButtonSize = typeof sizes[number]; export type FIconButtonState = | "primary" | "danger" @@ -34,6 +34,7 @@ export type FIconButtonState = | `custom, ${string}`; export class FIconButton extends FRoot { + static tagName = "f-icon-button"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-icon/f-icon.ts b/packages/flow-core/src/components/f-icon/f-icon.ts index 88e7a4ef0..af15fd82c 100644 --- a/packages/flow-core/src/components/f-icon/f-icon.ts +++ b/packages/flow-core/src/components/f-icon/f-icon.ts @@ -30,6 +30,7 @@ export type FIconState = | `custom, ${string}`; export class FIcon extends FRoot { + static tagName = "f-icon"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-input/f-input-light.ts b/packages/flow-core/src/components/f-input/f-input-light.ts index 6472b1e3d..390c5dcf7 100644 --- a/packages/flow-core/src/components/f-input/f-input-light.ts +++ b/packages/flow-core/src/components/f-input/f-input-light.ts @@ -12,6 +12,7 @@ import { FInputBase } from "./f-input-base"; injectCss("f-input-light", globalStyle); export class FInputLight extends FInputBase { + static tagName = "f-input-light"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-input/f-input.ts b/packages/flow-core/src/components/f-input/f-input.ts index f30dddba8..406e2e945 100644 --- a/packages/flow-core/src/components/f-input/f-input.ts +++ b/packages/flow-core/src/components/f-input/f-input.ts @@ -13,6 +13,7 @@ injectCss("f-input", globalStyle); export type { FInputState, FInputCustomEvent, FInputSuffixWhen } from "./f-input-base"; export class FInput extends FInputBase { + static tagName = "f-input"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts index 988b6b267..497b8a8f7 100644 --- a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts +++ b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts @@ -15,10 +15,10 @@ const category = ["fill", "outline"] as const; const sizes = ["x-large", "large", "medium", "small"] as const; const states = ["primary", "danger", "warning", "success", "default", "inherit"] as const; -export type FPictogramVariant = (typeof variants)[number]; -export type FPictogramCategory = (typeof category)[number]; -export type FPictogramSize = (typeof sizes)[number]; -export type FPictogramState = (typeof states)[number]; +export type FPictogramVariant = typeof variants[number]; +export type FPictogramCategory = typeof category[number]; +export type FPictogramSize = typeof sizes[number]; +export type FPictogramState = typeof states[number]; let colors = [ "#FFB900", @@ -47,6 +47,7 @@ function generateHslaColors(saturation: number, lightness: number, alpha: number colors = generateHslaColors(50, 60, 1.0, 10); export class FPictogram extends FRoot { + static tagName = "f-pictogram"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-popover/f-popover.ts b/packages/flow-core/src/components/f-popover/f-popover.ts index dbde91dfd..b33843da8 100644 --- a/packages/flow-core/src/components/f-popover/f-popover.ts +++ b/packages/flow-core/src/components/f-popover/f-popover.ts @@ -71,6 +71,7 @@ export type FPopOverOffset = { }; export class FPopover extends FRoot { + static tagName = "f-popover"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-progress-bar/f-progress-bar.ts b/packages/flow-core/src/components/f-progress-bar/f-progress-bar.ts index 85c6c2ee9..ee0a0d162 100644 --- a/packages/flow-core/src/components/f-progress-bar/f-progress-bar.ts +++ b/packages/flow-core/src/components/f-progress-bar/f-progress-bar.ts @@ -27,6 +27,7 @@ export type FProgressBarWidthProp = "fill-container" | `${number}px`; export type FProgressBarValueProp = `${number}%`; export class FProgressBar extends FRoot { + static tagName = "f-progress-bar"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-radio/f-radio.ts b/packages/flow-core/src/components/f-radio/f-radio.ts index da16681c3..eb8dfe5b6 100644 --- a/packages/flow-core/src/components/f-radio/f-radio.ts +++ b/packages/flow-core/src/components/f-radio/f-radio.ts @@ -14,6 +14,7 @@ export type FRadioCustomEvent = { }; export class FRadio extends FRoot { + static tagName = "f-radio"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-search/f-search.ts b/packages/flow-core/src/components/f-search/f-search.ts index 4e328b8e0..e35600458 100644 --- a/packages/flow-core/src/components/f-search/f-search.ts +++ b/packages/flow-core/src/components/f-search/f-search.ts @@ -39,6 +39,7 @@ export type FSearchSuggestions = string[] | FSearchSuggestionsCategory | FSearch export type FSearchScope = string[] | "none"; export class FSearch extends FRoot { + static tagName = "f-search"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-select/f-select.ts b/packages/flow-core/src/components/f-select/f-select.ts index 8ad414b74..f424b3ced 100644 --- a/packages/flow-core/src/components/f-select/f-select.ts +++ b/packages/flow-core/src/components/f-select/f-select.ts @@ -69,6 +69,7 @@ export type FSelectCreateOptionEvent = { export type FSelectMaxOptionsWidth = `${number}px`; export class FSelect extends FRoot { + static tagName = "f-select"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-spacer/f-spacer.ts b/packages/flow-core/src/components/f-spacer/f-spacer.ts index 2004d8020..25e637a4b 100644 --- a/packages/flow-core/src/components/f-spacer/f-spacer.ts +++ b/packages/flow-core/src/components/f-spacer/f-spacer.ts @@ -18,6 +18,7 @@ export type FSpacerSizeProp = | `${number}vw`; export class FSpacer extends FRoot { + static tagName = "f-spacer"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-suggest/f-suggest.ts b/packages/flow-core/src/components/f-suggest/f-suggest.ts index dd8dc7166..2f8378091 100644 --- a/packages/flow-core/src/components/f-suggest/f-suggest.ts +++ b/packages/flow-core/src/components/f-suggest/f-suggest.ts @@ -36,6 +36,7 @@ export type FSuggestWhen = (suggestion: string | FSuggestTemplate, value?: strin export type FSuggestSuggestions = string[] | FSuggestSuggestionsCategory | FSuggestTemplate[]; export class FSuggest extends FRoot { + static tagName = "f-suggest"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-switch/f-switch.ts b/packages/flow-core/src/components/f-switch/f-switch.ts index 2557e3e2b..018e00786 100644 --- a/packages/flow-core/src/components/f-switch/f-switch.ts +++ b/packages/flow-core/src/components/f-switch/f-switch.ts @@ -15,6 +15,7 @@ export type FSwitchCustomEvent = { }; export class FSwitch extends FRoot { + static tagName = "f-switch"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-tab-content/f-tab-content.ts b/packages/flow-core/src/components/f-tab-content/f-tab-content.ts index 093d25097..0680faea9 100644 --- a/packages/flow-core/src/components/f-tab-content/f-tab-content.ts +++ b/packages/flow-core/src/components/f-tab-content/f-tab-content.ts @@ -7,6 +7,7 @@ import { injectCss } from "@ollion/flow-core-config"; injectCss("f-tab-content", globalStyle); export class FTabContent extends FRoot { + static tagName = "f-tab-content"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-tab-node/f-tab-node.ts b/packages/flow-core/src/components/f-tab-node/f-tab-node.ts index 51f9228ab..111d78c8a 100644 --- a/packages/flow-core/src/components/f-tab-node/f-tab-node.ts +++ b/packages/flow-core/src/components/f-tab-node/f-tab-node.ts @@ -9,6 +9,7 @@ import { injectCss } from "@ollion/flow-core-config"; injectCss("f-tab-node", globalStyle); export class FTabNode extends FRoot { + static tagName = "f-tab-node"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-tab/f-tab.ts b/packages/flow-core/src/components/f-tab/f-tab.ts index 21307549a..3a4a9f2fa 100644 --- a/packages/flow-core/src/components/f-tab/f-tab.ts +++ b/packages/flow-core/src/components/f-tab/f-tab.ts @@ -13,6 +13,7 @@ injectCss("f-tab", globalStyle); export type FTabNodeWidthProp = "fill" | "hug-content" | `${number}`; export class FTab extends FRoot { + static tagName = "f-tab"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-tag/f-tag.ts b/packages/flow-core/src/components/f-tag/f-tag.ts index a7040e388..25f4f60ba 100644 --- a/packages/flow-core/src/components/f-tag/f-tag.ts +++ b/packages/flow-core/src/components/f-tag/f-tag.ts @@ -37,6 +37,7 @@ export type FTagCategory = "fill" | "outline"; */ export class FTag extends FRoot { + static tagName = "f-tag"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-template/f-template.ts b/packages/flow-core/src/components/f-template/f-template.ts index 12e5cff21..45da7fa55 100644 --- a/packages/flow-core/src/components/f-template/f-template.ts +++ b/packages/flow-core/src/components/f-template/f-template.ts @@ -6,6 +6,7 @@ import { injectCss } from "@ollion/flow-core-config"; injectCss("f-template", globalStyle); export class FTemplate extends FRoot { + static tagName = "f-template"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-text-area/f-text-area.ts b/packages/flow-core/src/components/f-text-area/f-text-area.ts index c28634e6a..f126efdf8 100644 --- a/packages/flow-core/src/components/f-text-area/f-text-area.ts +++ b/packages/flow-core/src/components/f-text-area/f-text-area.ts @@ -16,6 +16,7 @@ export type FTextAreaCustomEvent = { }; export class FTextArea extends FRoot { + static tagName = "f-text-area"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-text/f-text.ts b/packages/flow-core/src/components/f-text/f-text.ts index 15092c059..a6dccfdf1 100644 --- a/packages/flow-core/src/components/f-text/f-text.ts +++ b/packages/flow-core/src/components/f-text/f-text.ts @@ -28,6 +28,7 @@ export type FTextStateProp = */ export class FText extends FRoot { + static tagName = "f-text"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-toast/f-toast.ts b/packages/flow-core/src/components/f-toast/f-toast.ts index 581f575ab..cbc7cd024 100644 --- a/packages/flow-core/src/components/f-toast/f-toast.ts +++ b/packages/flow-core/src/components/f-toast/f-toast.ts @@ -14,6 +14,7 @@ injectCss("f-toast", globalStyle); export type FToastState = "default" | "primary" | "success" | "warning" | "danger"; export class FToast extends FRoot { + static tagName = "f-toast"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-tooltip/f-tooltip.ts b/packages/flow-core/src/components/f-tooltip/f-tooltip.ts index 5eb3c57a0..0de5aa56a 100644 --- a/packages/flow-core/src/components/f-tooltip/f-tooltip.ts +++ b/packages/flow-core/src/components/f-tooltip/f-tooltip.ts @@ -24,6 +24,7 @@ export type FTooltipPlacement = | "auto"; export class FTooltip extends LitElement { + static tagName = "f-tooltip"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/index.ts b/packages/flow-core/src/index.ts index d6d0b8490..79a917272 100644 --- a/packages/flow-core/src/index.ts +++ b/packages/flow-core/src/index.ts @@ -1,3 +1,5 @@ +/* eslint-disable @typescript-eslint/no-unsafe-argument */ +/* eslint-disable @typescript-eslint/ban-ts-comment */ /// import { ConfigUtil } from "@ollion/flow-core-config"; @@ -166,17 +168,14 @@ export const flowCoreElements = [ FColorPicker, FCountdown ]; + export function register(elements: (new () => LitElement)[]) { elements.forEach(element => { - let tagName = element.name.replace( - /[A-Z]/g, - (match, offset) => (offset > 0 ? "-" : "") + match.toLowerCase() - ); - if (element.name === "FMDEditor") { - tagName = "f-md-editor"; + //@ts-expect-error + if (element.tagName && !customElements.get(element.tagName)) { + //@ts-expect-error + customElements.define(element.tagName, element); } - - if (!customElements.get(tagName)) customElements.define(tagName, element); }); } diff --git a/packages/flow-core/vite.config.ts b/packages/flow-core/vite.config.ts index 3a0a2747b..4f6cfccc1 100644 --- a/packages/flow-core/vite.config.ts +++ b/packages/flow-core/vite.config.ts @@ -32,7 +32,6 @@ export default defineConfig({ "@ollion/flow-core-config", "vanilla-colorful", "mark.js", - "@emoji-mart/data", "@lit-labs/virtualizer", "flatpickr", "@floating-ui/dom" diff --git a/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts b/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts index 04b2ce286..14e8b19b5 100644 --- a/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts +++ b/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts @@ -12,6 +12,7 @@ import { injectCss } from "@ollion/flow-core-config"; injectCss("f-checkbox-group", globalStyle); export class FCheckboxGroup extends FRoot { + static tagName = "f-checkbox-group"; /** * css loaded from scss file */ diff --git a/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts b/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts index b57e09b58..95223833c 100644 --- a/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts +++ b/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts @@ -10,6 +10,7 @@ injectCss("f-field-separator", globalStyle); export type FFieldSeparatorState = FDividerState; export class FFieldSeparator extends FRoot { + static tagName = "f-field-separator"; /** * css loaded from scss file */ diff --git a/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts b/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts index 75be90846..b9e872b45 100644 --- a/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts +++ b/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts @@ -35,6 +35,7 @@ export type ArrayValueType = ( )[]; export class FFormArray extends FRoot { + static tagName = "f-form-array"; /** * css loaded from scss file */ diff --git a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts index ef8720cb4..be434caa0 100644 --- a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts +++ b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts @@ -33,6 +33,7 @@ import formArrayGlobalStyles from "./../f-form-array/f-form-array-global.scss?in injectCss("f-form-builder", globalStyle); export class FFormBuilder extends FRoot { + static tagName = "f-form-builder"; /** * css loaded from scss file */ diff --git a/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts b/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts index d8072bdad..9a1026f98 100644 --- a/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts +++ b/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts @@ -30,6 +30,7 @@ export type ObjectValueType = Record< >; export class FFormObject extends FRoot { + static tagName = "f-form-object"; /** * css loaded from scss file */ diff --git a/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts b/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts index 3fa1c962b..4599267fe 100644 --- a/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts +++ b/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts @@ -16,6 +16,7 @@ export const radioGroupStyles = eleStyle; */ export class FRadioGroup extends FRoot { + static tagName = "f-radio-group"; /** * css loaded from scss file */ diff --git a/packages/flow-lineage/src/components/f-lineage/f-lineage.test.ts b/packages/flow-lineage/src/components/f-lineage/f-lineage.test.ts index 96382be73..9a2691139 100644 --- a/packages/flow-lineage/src/components/f-lineage/f-lineage.test.ts +++ b/packages/flow-lineage/src/components/f-lineage/f-lineage.test.ts @@ -5,6 +5,10 @@ import { html, fixture, expect } from "@open-wc/testing"; import "../../../"; import { FLineage } from "../../../"; +import { register, flowCoreElements } from "@ollion/flow-core"; + +register([...flowCoreElements, FLineage]); + describe("f-lineage", () => { it("is defined", () => { const el = document.createElement("f-lineage"); diff --git a/packages/flow-lineage/src/components/f-lineage/f-lineage.ts b/packages/flow-lineage/src/components/f-lineage/f-lineage.ts index efab76e08..62885a88a 100644 --- a/packages/flow-lineage/src/components/f-lineage/f-lineage.ts +++ b/packages/flow-lineage/src/components/f-lineage/f-lineage.ts @@ -29,6 +29,7 @@ injectCss("f-lineage", globalStyle); // Renders attribute names of parent element to textContent export class FLineage extends FRoot { + static tagName = "f-lineage"; /** * css loaded from scss file */ diff --git a/packages/flow-log/src/components/f-log/f-log.test.ts b/packages/flow-log/src/components/f-log/f-log.test.ts index 1769e69c8..b7f99a3c7 100644 --- a/packages/flow-log/src/components/f-log/f-log.test.ts +++ b/packages/flow-log/src/components/f-log/f-log.test.ts @@ -4,10 +4,12 @@ import samplelogs from "./sample-logs"; // import flow-core elements import { register, flowCoreElements } from "@ollion/flow-core"; -register(flowCoreElements); + import { FLog } from "@ollion/flow-log"; import { FDiv } from "@ollion/flow-core"; +register([...flowCoreElements, FLog]); + describe("f-log", () => { it("is defined", () => { const el = document.createElement("f-log"); diff --git a/packages/flow-log/src/components/f-log/f-log.ts b/packages/flow-log/src/components/f-log/f-log.ts index 4bc329170..7d0797083 100644 --- a/packages/flow-log/src/components/f-log/f-log.ts +++ b/packages/flow-log/src/components/f-log/f-log.ts @@ -47,6 +47,7 @@ export type FLogLevels = string[]; */ export class FLog extends FRoot { + static tagName = "f-log"; /** * css loaded from scss file */ diff --git a/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.test.ts b/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.test.ts index 8fd2d01f9..de69f3052 100644 --- a/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.test.ts +++ b/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.test.ts @@ -1,13 +1,11 @@ -import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; import { expect, fixture, html } from "@open-wc/testing"; import sampleMd from "./sample-md"; // import flow-core elements -import { register, flowCoreElements, ConfigUtil } from "@ollion/flow-core"; +import { register, flowCoreElements } from "@ollion/flow-core"; import { FMDEditor } from "@ollion/flow-md-editor"; register([...flowCoreElements, FMDEditor]); -ConfigUtil.setConfig({ iconPack: IconPack }); describe("f-md-editor", () => { it("is defined", () => { diff --git a/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.ts b/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.ts index 41b8a52ff..d56913502 100644 --- a/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.ts +++ b/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.ts @@ -10,6 +10,7 @@ import { injectCss } from "@ollion/flow-core-config"; injectCss("f-md-editor", globalStyle); export class FMDEditor extends FRoot { + static tagName = "f-md-editor"; /** * css loaded from scss file */ diff --git a/packages/flow-md-editor/vite.config.ts b/packages/flow-md-editor/vite.config.ts index 0fc86e60c..71ee5047c 100644 --- a/packages/flow-md-editor/vite.config.ts +++ b/packages/flow-md-editor/vite.config.ts @@ -29,8 +29,7 @@ export default defineConfig({ "@lit-labs/virtualizer", "flatpickr", "@floating-ui/dom", - "monaco-editor", - "showdown" + "monaco-editor" ], output: { globals: { diff --git a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts index d7a6e45fe..5b72976b2 100644 --- a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts +++ b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts @@ -54,6 +54,7 @@ export type FTableSchemaHeaderCellemplate = (value: T) => HTMLTemplateR export type FTableSchemaStickyBackground = "default" | "secondary" | "tertiary" | "subtle"; export class FTableSchema extends FRoot { + static tagName = "f-table-schema"; /** * css loaded from scss file */ diff --git a/packages/flow-table/src/components/f-table/f-table.ts b/packages/flow-table/src/components/f-table/f-table.ts index 929d0270e..f958e4bb9 100644 --- a/packages/flow-table/src/components/f-table/f-table.ts +++ b/packages/flow-table/src/components/f-table/f-table.ts @@ -13,6 +13,7 @@ export type FTableSize = "medium" | "small"; export type FTableSelectable = "single" | "multiple" | "none"; export class FTable extends FRoot { + static tagName = "f-table"; /** * css loaded from scss file */ diff --git a/packages/flow-table/src/components/f-tcell/f-tcell.ts b/packages/flow-table/src/components/f-tcell/f-tcell.ts index b6c63d9f2..9d11df6cf 100644 --- a/packages/flow-table/src/components/f-tcell/f-tcell.ts +++ b/packages/flow-table/src/components/f-tcell/f-tcell.ts @@ -34,6 +34,7 @@ export type FTcellAlign = | "bottom-right"; export class FTcell extends FRoot { + static tagName = "f-tcell"; /** * css loaded from scss file */ diff --git a/packages/flow-table/src/components/f-trow/f-trow.ts b/packages/flow-table/src/components/f-trow/f-trow.ts index 6f1fb39ab..77c74a8ad 100644 --- a/packages/flow-table/src/components/f-trow/f-trow.ts +++ b/packages/flow-table/src/components/f-trow/f-trow.ts @@ -20,6 +20,7 @@ export type FTrowState = export type FTrowChevronPosition = "left" | "right"; export class FTrow extends FRoot { + static tagName = "f-trow"; /** * css loaded from scss file */ From b05f40ddabc531996644c9d8dad342840036cfb0 Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Mon, 29 Apr 2024 20:13:07 +0530 Subject: [PATCH 08/13] manual-register tagName static attribute added --- .../flow-core/src/components/f-breadcrumb/f-breadcrumb.ts | 4 ++-- .../flow-core/src/components/f-countdown/f-countdown.ts | 8 ++++---- .../src/components/f-icon-button/f-icon-button.ts | 6 +++--- .../flow-core/src/components/f-pictogram/f-pictogram.ts | 8 ++++---- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts index ef0cdeb60..23138df78 100644 --- a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts +++ b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts @@ -17,8 +17,8 @@ const sizes = ["medium", "small"] as const; export type FBreadCrumbsProp = { tabIndex: number; title: string; icon?: string }; export type FBreadcrumbs = FBreadCrumbsProp[]; -export type FBreadcrumbSize = typeof sizes[number]; -export type FBreadcrumbVariant = typeof variants[number]; +export type FBreadcrumbSize = (typeof sizes)[number]; +export type FBreadcrumbVariant = (typeof variants)[number]; export class FBreadcrumb extends FRoot { static tagName = "f-breadcrumb"; diff --git a/packages/flow-core/src/components/f-countdown/f-countdown.ts b/packages/flow-core/src/components/f-countdown/f-countdown.ts index 790a7416b..5a77a0f6c 100644 --- a/packages/flow-core/src/components/f-countdown/f-countdown.ts +++ b/packages/flow-core/src/components/f-countdown/f-countdown.ts @@ -16,10 +16,10 @@ const sizes = ["large", "medium", "small", "x-small"] as const; const categories = ["fill", "outline"] as const; const placements = ["left", "right", "bottom", "top", "none"] as const; -export type FCountdownStateProp = typeof states[number]; -export type FCountdownCategoryProp = typeof categories[number]; -export type FCountdownSizesProp = typeof sizes[number]; -export type FCountdownLabelProp = typeof placements[number]; +export type FCountdownStateProp = (typeof states)[number]; +export type FCountdownCategoryProp = (typeof categories)[number]; +export type FCountdownSizesProp = (typeof sizes)[number]; +export type FCountdownLabelProp = (typeof placements)[number]; export type FCountdownDuration = number | string; export class FCountdown extends FRoot { diff --git a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts index 726819ce7..27a438717 100644 --- a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts +++ b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts @@ -21,9 +21,9 @@ const variants = ["round", "curved", "block"] as const; const categories = ["fill", "outline", "transparent", "packed"] as const; const sizes = ["large", "medium", "small", "x-small"] as const; -export type FIconButtonVariant = typeof variants[number]; -export type FIconButtonType = typeof categories[number]; -export type FIconButtonSize = typeof sizes[number]; +export type FIconButtonVariant = (typeof variants)[number]; +export type FIconButtonType = (typeof categories)[number]; +export type FIconButtonSize = (typeof sizes)[number]; export type FIconButtonState = | "primary" | "danger" diff --git a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts index 497b8a8f7..337d1d540 100644 --- a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts +++ b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts @@ -15,10 +15,10 @@ const category = ["fill", "outline"] as const; const sizes = ["x-large", "large", "medium", "small"] as const; const states = ["primary", "danger", "warning", "success", "default", "inherit"] as const; -export type FPictogramVariant = typeof variants[number]; -export type FPictogramCategory = typeof category[number]; -export type FPictogramSize = typeof sizes[number]; -export type FPictogramState = typeof states[number]; +export type FPictogramVariant = (typeof variants)[number]; +export type FPictogramCategory = (typeof category)[number]; +export type FPictogramSize = (typeof sizes)[number]; +export type FPictogramState = (typeof states)[number]; let colors = [ "#FFB900", From aeaefc8c1073b25f3159b8eebd76ecbcc82ba63b Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Mon, 29 Apr 2024 20:15:18 +0530 Subject: [PATCH 09/13] manual-register tagName static attribute added --- .../f-document-viewer/f-document-viewer.test.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/flow-core/src/components/f-document-viewer/f-document-viewer.test.ts b/packages/flow-core/src/components/f-document-viewer/f-document-viewer.test.ts index 4f4e7d995..10cd3ba8e 100644 --- a/packages/flow-core/src/components/f-document-viewer/f-document-viewer.test.ts +++ b/packages/flow-core/src/components/f-document-viewer/f-document-viewer.test.ts @@ -44,6 +44,7 @@ function createDocContentObject( } } } + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument if (content && Object.keys(content).length > 0) { doc.data = content; } @@ -101,7 +102,7 @@ describe("f-document-viewer", () => { const el = await fixture(html` `); - const filter = el.shadowRoot!.querySelector(".f-select-level-selector")!; + const filter = el.shadowRoot.querySelector(".f-select-level-selector")!; const listner = oneEvent(filter, "input"); @@ -117,7 +118,7 @@ describe("f-document-viewer", () => { await listner; await el.updateComplete; - const descendants = el.shadowRoot!.querySelectorAll(`[data-level="2"]`); + const descendants = el.shadowRoot.querySelectorAll(`[data-level="2"]`); expect(descendants[0].style.display).to.equal("none"); }); @@ -126,7 +127,7 @@ describe("f-document-viewer", () => { const el = await fixture(html` `); - const highlight = el.shadowRoot!.querySelector(".f-search-text-highlight")!; + const highlight = el.shadowRoot.querySelector(".f-search-text-highlight")!; const listner = oneEvent(highlight, "input"); highlight.value = "The"; @@ -141,7 +142,7 @@ describe("f-document-viewer", () => { await listner; await el.updateComplete; - const descendants = el.shadowRoot!.querySelectorAll("#doc-text"); + const descendants = el.shadowRoot.querySelectorAll("#doc-text"); expect(descendants[0].highlight).to.equal("The"); }); }); From b78c95e0f23109bffef38d2ef5ac549a0d007c7c Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Mon, 29 Apr 2024 20:52:04 +0530 Subject: [PATCH 10/13] manual-register changelog updated --- docs/component-registration.md | 43 +++++++++++++++++++++++++ packages/flow-code-editor/CHANGELOG.md | 7 ++++ packages/flow-code-editor/package.json | 2 +- packages/flow-core/CHANGELOG.md | 7 ++-- packages/flow-core/package.json | 2 +- packages/flow-form-builder/CHANGELOG.md | 7 ++-- packages/flow-form-builder/package.json | 2 +- packages/flow-lineage/CHANGELOG.md | 7 ++++ packages/flow-lineage/package.json | 2 +- packages/flow-log/CHANGELOG.md | 11 +++---- packages/flow-log/package.json | 2 +- packages/flow-md-editor/CHANGELOG.md | 7 ++++ packages/flow-md-editor/package.json | 2 +- packages/flow-table/CHANGELOG.md | 7 ++++ packages/flow-table/package.json | 2 +- 15 files changed, 90 insertions(+), 20 deletions(-) create mode 100644 docs/component-registration.md diff --git a/docs/component-registration.md b/docs/component-registration.md new file mode 100644 index 000000000..dd0eaede6 --- /dev/null +++ b/docs/component-registration.md @@ -0,0 +1,43 @@ +### Method 1 + +- To register all component of `@ollion/flow-core`, use the following snippet. + +```javascript +import { register, flowCoreElements } from "@ollion/flow-core"; +register(flowCoreElements); +``` + +### Method 2 + +- Suppose you are only going to use f-div and f-button, and you want to import and package only these 2 components in your project, then use the following snippet. + +```javascript +import { register, FDiv, FButton } from "@ollion/flow-core"; +register([FDiv, FButton]); +``` + +
+ +### Note 1 + +- Following packages has single element hence you need to import single element from it. + +```javascript +import { FLog } from "@ollion/flow-log"; +import { FCodeEditor } from "@ollion/flow-code-editor"; +import { FMDEditor } from "@ollion/flow-md-editor"; +import { FLineage } from "@ollion/flow-lineage"; + +register([FLog, FCodeEditor, FMDEditor, FLineage]); +``` + +### Note 2 + +- Following packages has 2 or more element, and almost all time all elements are required to register along with flow-core + +```javascript +import { flowTableElements } from "@ollion/flow-table"; +import { flowFormBuilderElements } from "@ollion/flow-form-builder"; + +register([...flowTableElements, ...flowFormBuilderElements]); +``` diff --git a/packages/flow-code-editor/CHANGELOG.md b/packages/flow-code-editor/CHANGELOG.md index 12ae33d78..fefe08884 100644 --- a/packages/flow-code-editor/CHANGELOG.md +++ b/packages/flow-code-editor/CHANGELOG.md @@ -2,6 +2,13 @@ # Change Log +## [2.0.0] - 2024-04-20 + +### Major/Breaking Changes + +- Auto web component registration was removed to facilitate tree shaking. +- To register component manually please check [here](https://github.com/ollionorg/flow-core/blob/main/docs/component-registration.md) + ## [1.1.0] - 2023-11-27 ### Minor Changes diff --git a/packages/flow-code-editor/package.json b/packages/flow-code-editor/package.json index 578d0f3b2..d3a908b4a 100644 --- a/packages/flow-code-editor/package.json +++ b/packages/flow-code-editor/package.json @@ -1,6 +1,6 @@ { "name": "@ollion/flow-code-editor", - "version": "1.1.0", + "version": "2.0.0", "description": "Code editor component for flow library", "module": "dist/flow-code-editor.es.js", "main": "dist/flow-code-editor.es.js", diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md index 0ecbd1614..d9ff55b77 100644 --- a/packages/flow-core/CHANGELOG.md +++ b/packages/flow-core/CHANGELOG.md @@ -2,11 +2,12 @@ # Change Log -## [2.9.10] - 2024-04-15 +## [3.0.0] - 2024-04-29 -### Bug Fixes +### Major/Breaking Changes -- `f-select` : call `updateDimentions` only while opening. +- Auto web component registration was removed to facilitate tree shaking. +- To register component manually please check [here](https://github.com/ollionorg/flow-core/blob/main/docs/component-registration.md) ## [2.9.9] - 2024-04-04 diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json index 8180b287c..8d8654af8 100644 --- a/packages/flow-core/package.json +++ b/packages/flow-core/package.json @@ -1,6 +1,6 @@ { "name": "@ollion/flow-core", - "version": "2.9.10", + "version": "3.0.0", "description": "Core package of flow design system", "module": "dist/flow-core.es.js", "main": "dist/flow-core.cjs.js", diff --git a/packages/flow-form-builder/CHANGELOG.md b/packages/flow-form-builder/CHANGELOG.md index 6b17a458a..10cc6ef9a 100644 --- a/packages/flow-form-builder/CHANGELOG.md +++ b/packages/flow-form-builder/CHANGELOG.md @@ -2,11 +2,12 @@ # Change Log -## [2.4.1] - 2024-04-22 +## [3.0.0] - 2024-04-29 -### Bug Fixes +### Major/Breaking Changes -- Validation rules are triggered multiple times when multiple fields utilize the `showWhen` property. +- Auto web component registration was removed to facilitate tree shaking. +- To register component manually please check [here](https://github.com/ollionorg/flow-core/blob/main/docs/component-registration.md) ## [2.4.0] - 2024-03-27 diff --git a/packages/flow-form-builder/package.json b/packages/flow-form-builder/package.json index 2b00eeffe..b8c2ecf89 100644 --- a/packages/flow-form-builder/package.json +++ b/packages/flow-form-builder/package.json @@ -1,6 +1,6 @@ { "name": "@ollion/flow-form-builder", - "version": "2.4.1", + "version": "3.0.0", "description": "Form builder for the flow design system", "module": "dist/flow-form-builder.es.js", "main": "dist/flow-form-builder.cjs.js", diff --git a/packages/flow-lineage/CHANGELOG.md b/packages/flow-lineage/CHANGELOG.md index 0804f5362..9f959e65e 100644 --- a/packages/flow-lineage/CHANGELOG.md +++ b/packages/flow-lineage/CHANGELOG.md @@ -2,6 +2,13 @@ # Change Log +## [4.0.0] - 2024-04-29 + +### Major/Breaking Changes + +- Auto web component registration was removed to facilitate tree shaking. +- To register component manually please check [here](https://github.com/ollionorg/flow-core/blob/main/docs/component-registration.md) + ## [3.2.1] - 2024-03-19 ### Improvements diff --git a/packages/flow-lineage/package.json b/packages/flow-lineage/package.json index 65d95002e..bb470a5bf 100644 --- a/packages/flow-lineage/package.json +++ b/packages/flow-lineage/package.json @@ -1,6 +1,6 @@ { "name": "@ollion/flow-lineage", - "version": "3.2.1", + "version": "4.0.0", "description": "Lineage dependency for flow design system", "module": "dist/flow-lineage.es.js", "main": "dist/flow-lineage.cjs.js", diff --git a/packages/flow-log/CHANGELOG.md b/packages/flow-log/CHANGELOG.md index adfdc6854..e4ab55b8d 100644 --- a/packages/flow-log/CHANGELOG.md +++ b/packages/flow-log/CHANGELOG.md @@ -2,15 +2,12 @@ # Change Log -## [2.1.0] - 2024-03-28 +## [3.0.0] - 2024-04-29 -### Features +### Major/Breaking Changes -- f-log : `label` property introduced to display label at top-left. -- f-log : `header` slot introduced to display meta info after search bar. -- f-log : `actions` slot introduced to display additional actions menu or icons at top-right. -- f-log : formatting colors updated. -- f-log : search bar and log level selection elements style updated. +- Auto web component registration was removed to facilitate tree shaking. +- To register component manually please check [here](https://github.com/ollionorg/flow-core/blob/main/docs/component-registration.md) ## [2.0.6] - 2024-03-23 diff --git a/packages/flow-log/package.json b/packages/flow-log/package.json index 4c2bd1db0..8c2ade47c 100644 --- a/packages/flow-log/package.json +++ b/packages/flow-log/package.json @@ -1,6 +1,6 @@ { "name": "@ollion/flow-log", - "version": "2.1.0", + "version": "3.0.0", "description": "Code editor component for flow library", "module": "dist/flow-log.es.js", "main": "dist/flow-log.es.js", diff --git a/packages/flow-md-editor/CHANGELOG.md b/packages/flow-md-editor/CHANGELOG.md index cbb182767..d9e91006a 100644 --- a/packages/flow-md-editor/CHANGELOG.md +++ b/packages/flow-md-editor/CHANGELOG.md @@ -2,6 +2,13 @@ # Change Log +## [3.0.0] - 2024-04-29 + +### Major/Breaking Changes + +- Auto web component registration was removed to facilitate tree shaking. +- To register component manually please check [here](https://github.com/ollionorg/flow-core/blob/main/docs/component-registration.md) + ## [2.1.0] - 2023-11-27 ### Minor Changes diff --git a/packages/flow-md-editor/package.json b/packages/flow-md-editor/package.json index 670495e75..444ef88ab 100644 --- a/packages/flow-md-editor/package.json +++ b/packages/flow-md-editor/package.json @@ -1,6 +1,6 @@ { "name": "@ollion/flow-md-editor", - "version": "2.1.0", + "version": "3.0.0", "description": "Code editor component for flow library", "module": "dist/flow-md-editor.es.js", "main": "dist/flow-md-editor.es.js", diff --git a/packages/flow-table/CHANGELOG.md b/packages/flow-table/CHANGELOG.md index 5f766b553..9571b687f 100644 --- a/packages/flow-table/CHANGELOG.md +++ b/packages/flow-table/CHANGELOG.md @@ -2,6 +2,13 @@ # Change Log +## [3.0.0] - 2024-04-29 + +### Major/Breaking Changes + +- Auto web component registration was removed to facilitate tree shaking. +- To register component manually please check [here](https://github.com/ollionorg/flow-core/blob/main/docs/component-registration.md) + ## [2.4.2] - 2024-03-20 ### Bug Fixes diff --git a/packages/flow-table/package.json b/packages/flow-table/package.json index 075f44568..0cc6c7a95 100644 --- a/packages/flow-table/package.json +++ b/packages/flow-table/package.json @@ -1,6 +1,6 @@ { "name": "@ollion/flow-table", - "version": "2.4.2", + "version": "3.0.0", "description": "Table component for flow library", "module": "dist/flow-table.es.js", "main": "dist/flow-table.cjs.js", From 5062ad40716adb04b06f7ba2990b60b8110b9333 Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Mon, 29 Apr 2024 20:54:36 +0530 Subject: [PATCH 11/13] manual-register changelog updated --- .../src/components/f-form-array/f-form-array.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts b/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts index b9e872b45..0d509dbd9 100644 --- a/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts +++ b/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts @@ -22,6 +22,8 @@ import { FIconButton } from "@ollion/flow-core"; import { ifDefined } from "lit/directives/if-defined.js"; import globalStyle from "./f-form-array-global.scss?inline"; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +//@ts-ignore injectCss("f-form-array", globalStyle); export type ArrayValueType = ( | string From 4a4afaa84c8101f02249f4801ad403ea3803cfe6 Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Mon, 29 Apr 2024 21:00:32 +0530 Subject: [PATCH 12/13] manual-register tagName made readonly --- .../src/components/f-accordion/f-accordion.ts | 2 +- .../src/components/f-breadcrumb/f-breadcrumb.ts | 6 +++--- packages/flow-core/src/components/f-button/f-button.ts | 2 +- .../f-carousel-content/f-carousel-content.ts | 2 +- .../flow-core/src/components/f-carousel/f-carousel.ts | 2 +- .../flow-core/src/components/f-checkbox/f-checkbox.ts | 2 +- .../src/components/f-color-picker/f-color-picker.ts | 2 +- .../src/components/f-countdown/f-countdown.ts | 10 +++++----- .../flow-core/src/components/f-counter/f-counter.ts | 2 +- .../f-date-time-picker/f-date-time-picker.ts | 2 +- packages/flow-core/src/components/f-div/f-div.ts | 2 +- .../flow-core/src/components/f-divider/f-divider.ts | 2 +- .../components/f-document-viewer/f-document-viewer.ts | 2 +- .../src/components/f-emoji-picker/f-emoji-picker.ts | 2 +- packages/flow-core/src/components/f-field/f-field.ts | 2 +- .../src/components/f-file-upload/f-file-upload.ts | 2 +- .../src/components/f-form-field/f-form-field.ts | 2 +- .../src/components/f-form-group/f-form-group.ts | 2 +- packages/flow-core/src/components/f-form/f-form.ts | 2 +- packages/flow-core/src/components/f-grid/f-grid.ts | 2 +- .../src/components/f-icon-button/f-icon-button.ts | 8 ++++---- packages/flow-core/src/components/f-icon/f-icon.ts | 2 +- .../flow-core/src/components/f-input/f-input-light.ts | 2 +- packages/flow-core/src/components/f-input/f-input.ts | 2 +- .../src/components/f-pictogram/f-pictogram.ts | 10 +++++----- .../flow-core/src/components/f-popover/f-popover.ts | 2 +- .../src/components/f-progress-bar/f-progress-bar.ts | 2 +- packages/flow-core/src/components/f-radio/f-radio.ts | 2 +- packages/flow-core/src/components/f-search/f-search.ts | 2 +- packages/flow-core/src/components/f-select/f-select.ts | 2 +- packages/flow-core/src/components/f-spacer/f-spacer.ts | 2 +- .../flow-core/src/components/f-suggest/f-suggest.ts | 2 +- packages/flow-core/src/components/f-switch/f-switch.ts | 2 +- .../src/components/f-tab-content/f-tab-content.ts | 2 +- .../flow-core/src/components/f-tab-node/f-tab-node.ts | 2 +- packages/flow-core/src/components/f-tab/f-tab.ts | 2 +- packages/flow-core/src/components/f-tag/f-tag.ts | 2 +- .../flow-core/src/components/f-template/f-template.ts | 2 +- .../src/components/f-text-area/f-text-area.ts | 2 +- packages/flow-core/src/components/f-text/f-text.ts | 2 +- packages/flow-core/src/components/f-toast/f-toast.ts | 2 +- .../flow-core/src/components/f-tooltip/f-tooltip.ts | 2 +- .../components/f-checkbox-group/f-checkbox-group.ts | 2 +- .../components/f-field-separator/f-field-separator.ts | 2 +- .../src/components/f-form-array/f-form-array.ts | 2 +- .../src/components/f-form-builder/f-form-builder.ts | 2 +- .../src/components/f-form-object/f-form-object.ts | 2 +- .../src/components/f-radio-group/f-radio-group.ts | 2 +- .../flow-lineage/src/components/f-lineage/f-lineage.ts | 2 +- packages/flow-log/src/components/f-log/f-log.ts | 2 +- .../src/components/f-md-editor/f-md-editor.ts | 2 +- .../src/components/f-table-schema/f-table-schema.ts | 2 +- packages/flow-table/src/components/f-table/f-table.ts | 2 +- packages/flow-table/src/components/f-tcell/f-tcell.ts | 2 +- packages/flow-table/src/components/f-trow/f-trow.ts | 2 +- 55 files changed, 68 insertions(+), 68 deletions(-) diff --git a/packages/flow-core/src/components/f-accordion/f-accordion.ts b/packages/flow-core/src/components/f-accordion/f-accordion.ts index 44c786950..1dae5eaa8 100644 --- a/packages/flow-core/src/components/f-accordion/f-accordion.ts +++ b/packages/flow-core/src/components/f-accordion/f-accordion.ts @@ -18,7 +18,7 @@ export type FAccordionCustomEvent = { export type FAccordionPadding = FDivPaddingProp; export class FAccordion extends FRoot { - static tagName = "f-accordion"; + static readonly tagName = "f-accordion"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts index 23138df78..f33b51f98 100644 --- a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts +++ b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts @@ -17,11 +17,11 @@ const sizes = ["medium", "small"] as const; export type FBreadCrumbsProp = { tabIndex: number; title: string; icon?: string }; export type FBreadcrumbs = FBreadCrumbsProp[]; -export type FBreadcrumbSize = (typeof sizes)[number]; -export type FBreadcrumbVariant = (typeof variants)[number]; +export type FBreadcrumbSize = typeof sizes[number]; +export type FBreadcrumbVariant = typeof variants[number]; export class FBreadcrumb extends FRoot { - static tagName = "f-breadcrumb"; + static readonly tagName = "f-breadcrumb"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-button/f-button.ts b/packages/flow-core/src/components/f-button/f-button.ts index 2ec2e7ae4..fbbb53a7a 100644 --- a/packages/flow-core/src/components/f-button/f-button.ts +++ b/packages/flow-core/src/components/f-button/f-button.ts @@ -32,7 +32,7 @@ injectCss("f-button", globalStyle); */ export class FButton extends FRoot { - static tagName = "f-button"; + static readonly tagName = "f-button"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-carousel-content/f-carousel-content.ts b/packages/flow-core/src/components/f-carousel-content/f-carousel-content.ts index 244222321..82462251b 100644 --- a/packages/flow-core/src/components/f-carousel-content/f-carousel-content.ts +++ b/packages/flow-core/src/components/f-carousel-content/f-carousel-content.ts @@ -9,7 +9,7 @@ import { injectCss } from "@ollion/flow-core-config"; injectCss("f-carousel-content", globalStyle); export class FCarouselContent extends FRoot { - static tagName = "f-carousel-content"; + static readonly tagName = "f-carousel-content"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-carousel/f-carousel.ts b/packages/flow-core/src/components/f-carousel/f-carousel.ts index d4b930fde..f0be23cf1 100644 --- a/packages/flow-core/src/components/f-carousel/f-carousel.ts +++ b/packages/flow-core/src/components/f-carousel/f-carousel.ts @@ -12,7 +12,7 @@ import { injectCss } from "@ollion/flow-core-config"; injectCss("f-carousel", globalStyle); export class FCarousel extends FRoot { - static tagName = "f-carousel"; + static readonly tagName = "f-carousel"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-checkbox/f-checkbox.ts b/packages/flow-core/src/components/f-checkbox/f-checkbox.ts index b501b195c..fec593535 100644 --- a/packages/flow-core/src/components/f-checkbox/f-checkbox.ts +++ b/packages/flow-core/src/components/f-checkbox/f-checkbox.ts @@ -19,7 +19,7 @@ export type FCheckboxCustomEvent = { }; export class FCheckbox extends FRoot { - static tagName = "f-checkbox"; + static readonly tagName = "f-checkbox"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-color-picker/f-color-picker.ts b/packages/flow-core/src/components/f-color-picker/f-color-picker.ts index f5541bb2b..b1c61ae62 100644 --- a/packages/flow-core/src/components/f-color-picker/f-color-picker.ts +++ b/packages/flow-core/src/components/f-color-picker/f-color-picker.ts @@ -20,7 +20,7 @@ export type FColorPickerInputEvent = { }; export class FColorPicker extends FRoot { - static tagName = "f-color-picker"; + static readonly tagName = "f-color-picker"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-countdown/f-countdown.ts b/packages/flow-core/src/components/f-countdown/f-countdown.ts index 5a77a0f6c..68ddac631 100644 --- a/packages/flow-core/src/components/f-countdown/f-countdown.ts +++ b/packages/flow-core/src/components/f-countdown/f-countdown.ts @@ -16,14 +16,14 @@ const sizes = ["large", "medium", "small", "x-small"] as const; const categories = ["fill", "outline"] as const; const placements = ["left", "right", "bottom", "top", "none"] as const; -export type FCountdownStateProp = (typeof states)[number]; -export type FCountdownCategoryProp = (typeof categories)[number]; -export type FCountdownSizesProp = (typeof sizes)[number]; -export type FCountdownLabelProp = (typeof placements)[number]; +export type FCountdownStateProp = typeof states[number]; +export type FCountdownCategoryProp = typeof categories[number]; +export type FCountdownSizesProp = typeof sizes[number]; +export type FCountdownLabelProp = typeof placements[number]; export type FCountdownDuration = number | string; export class FCountdown extends FRoot { - static tagName = "f-countdown"; + static readonly tagName = "f-countdown"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-counter/f-counter.ts b/packages/flow-core/src/components/f-counter/f-counter.ts index 2b9e942c4..c2f9c157c 100644 --- a/packages/flow-core/src/components/f-counter/f-counter.ts +++ b/packages/flow-core/src/components/f-counter/f-counter.ts @@ -26,7 +26,7 @@ export type FCounterStateProp = | `custom, ${string}`; export class FCounter extends FRoot { - static tagName = "f-counter"; + static readonly tagName = "f-counter"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts index 75f5803b2..0d03f23cc 100644 --- a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts +++ b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts @@ -24,7 +24,7 @@ export type DateDisableType = DateLimit[]; export type FDateOption = DateOption; export class FDateTimePicker extends FRoot { - static tagName = "f-date-time-picker"; + static readonly tagName = "f-date-time-picker"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-div/f-div.ts b/packages/flow-core/src/components/f-div/f-div.ts index 57e106447..9f1785451 100644 --- a/packages/flow-core/src/components/f-div/f-div.ts +++ b/packages/flow-core/src/components/f-div/f-div.ts @@ -106,7 +106,7 @@ injectCss("f-div", globalStyle); */ export class FDiv extends FRoot { - static tagName = "f-div"; + static readonly tagName = "f-div"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-divider/f-divider.ts b/packages/flow-core/src/components/f-divider/f-divider.ts index e246333b8..441649bd0 100644 --- a/packages/flow-core/src/components/f-divider/f-divider.ts +++ b/packages/flow-core/src/components/f-divider/f-divider.ts @@ -12,7 +12,7 @@ injectCss("f-divider", globalStyle); export type FDividerState = "default" | "secondary" | "subtle" | `custom, ${string}`; export class FDivider extends FRoot { - static tagName = "f-divider"; + static readonly tagName = "f-divider"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-document-viewer/f-document-viewer.ts b/packages/flow-core/src/components/f-document-viewer/f-document-viewer.ts index 6718d11cf..cb7137854 100644 --- a/packages/flow-core/src/components/f-document-viewer/f-document-viewer.ts +++ b/packages/flow-core/src/components/f-document-viewer/f-document-viewer.ts @@ -43,7 +43,7 @@ export type FDocumentStatement = { export type FDocViewerContent = Record; export class FDocumentViewer extends FRoot { - static tagName = "f-document-viewer"; + static readonly tagName = "f-document-viewer"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts b/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts index 4dabcfbb0..01f2db187 100644 --- a/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts +++ b/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts @@ -57,7 +57,7 @@ export type RecentEmojis = string[]; export type ExcludeEmojis = string[]; export class FEmojiPicker extends FRoot { - static tagName = "f-emoji-picker"; + static readonly tagName = "f-emoji-picker"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-field/f-field.ts b/packages/flow-core/src/components/f-field/f-field.ts index f9260ae4e..4f3bd9849 100644 --- a/packages/flow-core/src/components/f-field/f-field.ts +++ b/packages/flow-core/src/components/f-field/f-field.ts @@ -15,7 +15,7 @@ export type FFieldStateProp = "default" | "primary" | "success" | "danger" | "wa */ export class FField extends FRoot { - static tagName = "f-field"; + static readonly tagName = "f-field"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-file-upload/f-file-upload.ts b/packages/flow-core/src/components/f-file-upload/f-file-upload.ts index 1b9600e20..e7e3da6ee 100644 --- a/packages/flow-core/src/components/f-file-upload/f-file-upload.ts +++ b/packages/flow-core/src/components/f-file-upload/f-file-upload.ts @@ -30,7 +30,7 @@ export type FFileUploadSizeProp = | `${number} TB`; export class FFileUpload extends FRoot { - static tagName = "f-file-upload"; + static readonly tagName = "f-file-upload"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-form-field/f-form-field.ts b/packages/flow-core/src/components/f-form-field/f-form-field.ts index 1104f67f1..0084c42b2 100644 --- a/packages/flow-core/src/components/f-form-field/f-form-field.ts +++ b/packages/flow-core/src/components/f-form-field/f-form-field.ts @@ -4,7 +4,7 @@ import { FRoot } from "../../mixins/components/f-root/f-root"; import { FDiv } from "../f-div/f-div"; export class FFormField extends FRoot { - static tagName = "f-form-field"; + static readonly tagName = "f-form-field"; static styles = [...FDiv.styles]; render() { /** diff --git a/packages/flow-core/src/components/f-form-group/f-form-group.ts b/packages/flow-core/src/components/f-form-group/f-form-group.ts index 9d47641c1..326b9698c 100644 --- a/packages/flow-core/src/components/f-form-group/f-form-group.ts +++ b/packages/flow-core/src/components/f-form-group/f-form-group.ts @@ -21,7 +21,7 @@ export type FGroupLabel = { */ export class FFormGroup extends FRoot { - static tagName = "f-form-group"; + static readonly tagName = "f-form-group"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-form/f-form.ts b/packages/flow-core/src/components/f-form/f-form.ts index 7ccba826f..ea1da06e6 100644 --- a/packages/flow-core/src/components/f-form/f-form.ts +++ b/packages/flow-core/src/components/f-form/f-form.ts @@ -17,7 +17,7 @@ injectCss("f-form", globalStyle); */ export class FForm extends FRoot { - static tagName = "f-form"; + static readonly tagName = "f-form"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-grid/f-grid.ts b/packages/flow-core/src/components/f-grid/f-grid.ts index 50a414142..f4ce84aa2 100644 --- a/packages/flow-core/src/components/f-grid/f-grid.ts +++ b/packages/flow-core/src/components/f-grid/f-grid.ts @@ -10,7 +10,7 @@ injectCss("f-grid", globalStyle); export type FGridBodyHeightProp = `${number}px` | `${number}%` | `${number}vh`; export class FGrid extends FRoot { - static tagName = "f-grid"; + static readonly tagName = "f-grid"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts index 27a438717..919797d1c 100644 --- a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts +++ b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts @@ -21,9 +21,9 @@ const variants = ["round", "curved", "block"] as const; const categories = ["fill", "outline", "transparent", "packed"] as const; const sizes = ["large", "medium", "small", "x-small"] as const; -export type FIconButtonVariant = (typeof variants)[number]; -export type FIconButtonType = (typeof categories)[number]; -export type FIconButtonSize = (typeof sizes)[number]; +export type FIconButtonVariant = typeof variants[number]; +export type FIconButtonType = typeof categories[number]; +export type FIconButtonSize = typeof sizes[number]; export type FIconButtonState = | "primary" | "danger" @@ -34,7 +34,7 @@ export type FIconButtonState = | `custom, ${string}`; export class FIconButton extends FRoot { - static tagName = "f-icon-button"; + static readonly tagName = "f-icon-button"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-icon/f-icon.ts b/packages/flow-core/src/components/f-icon/f-icon.ts index af15fd82c..04abb79b1 100644 --- a/packages/flow-core/src/components/f-icon/f-icon.ts +++ b/packages/flow-core/src/components/f-icon/f-icon.ts @@ -30,7 +30,7 @@ export type FIconState = | `custom, ${string}`; export class FIcon extends FRoot { - static tagName = "f-icon"; + static readonly tagName = "f-icon"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-input/f-input-light.ts b/packages/flow-core/src/components/f-input/f-input-light.ts index 390c5dcf7..6e4b10188 100644 --- a/packages/flow-core/src/components/f-input/f-input-light.ts +++ b/packages/flow-core/src/components/f-input/f-input-light.ts @@ -12,7 +12,7 @@ import { FInputBase } from "./f-input-base"; injectCss("f-input-light", globalStyle); export class FInputLight extends FInputBase { - static tagName = "f-input-light"; + static readonly tagName = "f-input-light"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-input/f-input.ts b/packages/flow-core/src/components/f-input/f-input.ts index 406e2e945..a4eaf40fc 100644 --- a/packages/flow-core/src/components/f-input/f-input.ts +++ b/packages/flow-core/src/components/f-input/f-input.ts @@ -13,7 +13,7 @@ injectCss("f-input", globalStyle); export type { FInputState, FInputCustomEvent, FInputSuffixWhen } from "./f-input-base"; export class FInput extends FInputBase { - static tagName = "f-input"; + static readonly tagName = "f-input"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts index 337d1d540..95aea1eed 100644 --- a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts +++ b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts @@ -15,10 +15,10 @@ const category = ["fill", "outline"] as const; const sizes = ["x-large", "large", "medium", "small"] as const; const states = ["primary", "danger", "warning", "success", "default", "inherit"] as const; -export type FPictogramVariant = (typeof variants)[number]; -export type FPictogramCategory = (typeof category)[number]; -export type FPictogramSize = (typeof sizes)[number]; -export type FPictogramState = (typeof states)[number]; +export type FPictogramVariant = typeof variants[number]; +export type FPictogramCategory = typeof category[number]; +export type FPictogramSize = typeof sizes[number]; +export type FPictogramState = typeof states[number]; let colors = [ "#FFB900", @@ -47,7 +47,7 @@ function generateHslaColors(saturation: number, lightness: number, alpha: number colors = generateHslaColors(50, 60, 1.0, 10); export class FPictogram extends FRoot { - static tagName = "f-pictogram"; + static readonly tagName = "f-pictogram"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-popover/f-popover.ts b/packages/flow-core/src/components/f-popover/f-popover.ts index b33843da8..10ae1395c 100644 --- a/packages/flow-core/src/components/f-popover/f-popover.ts +++ b/packages/flow-core/src/components/f-popover/f-popover.ts @@ -71,7 +71,7 @@ export type FPopOverOffset = { }; export class FPopover extends FRoot { - static tagName = "f-popover"; + static readonly tagName = "f-popover"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-progress-bar/f-progress-bar.ts b/packages/flow-core/src/components/f-progress-bar/f-progress-bar.ts index ee0a0d162..d8776095e 100644 --- a/packages/flow-core/src/components/f-progress-bar/f-progress-bar.ts +++ b/packages/flow-core/src/components/f-progress-bar/f-progress-bar.ts @@ -27,7 +27,7 @@ export type FProgressBarWidthProp = "fill-container" | `${number}px`; export type FProgressBarValueProp = `${number}%`; export class FProgressBar extends FRoot { - static tagName = "f-progress-bar"; + static readonly tagName = "f-progress-bar"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-radio/f-radio.ts b/packages/flow-core/src/components/f-radio/f-radio.ts index eb8dfe5b6..16e6b01ea 100644 --- a/packages/flow-core/src/components/f-radio/f-radio.ts +++ b/packages/flow-core/src/components/f-radio/f-radio.ts @@ -14,7 +14,7 @@ export type FRadioCustomEvent = { }; export class FRadio extends FRoot { - static tagName = "f-radio"; + static readonly tagName = "f-radio"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-search/f-search.ts b/packages/flow-core/src/components/f-search/f-search.ts index e35600458..3764a82df 100644 --- a/packages/flow-core/src/components/f-search/f-search.ts +++ b/packages/flow-core/src/components/f-search/f-search.ts @@ -39,7 +39,7 @@ export type FSearchSuggestions = string[] | FSearchSuggestionsCategory | FSearch export type FSearchScope = string[] | "none"; export class FSearch extends FRoot { - static tagName = "f-search"; + static readonly tagName = "f-search"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-select/f-select.ts b/packages/flow-core/src/components/f-select/f-select.ts index f424b3ced..cb956d30d 100644 --- a/packages/flow-core/src/components/f-select/f-select.ts +++ b/packages/flow-core/src/components/f-select/f-select.ts @@ -69,7 +69,7 @@ export type FSelectCreateOptionEvent = { export type FSelectMaxOptionsWidth = `${number}px`; export class FSelect extends FRoot { - static tagName = "f-select"; + static readonly tagName = "f-select"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-spacer/f-spacer.ts b/packages/flow-core/src/components/f-spacer/f-spacer.ts index 25e637a4b..c4a27358c 100644 --- a/packages/flow-core/src/components/f-spacer/f-spacer.ts +++ b/packages/flow-core/src/components/f-spacer/f-spacer.ts @@ -18,7 +18,7 @@ export type FSpacerSizeProp = | `${number}vw`; export class FSpacer extends FRoot { - static tagName = "f-spacer"; + static readonly tagName = "f-spacer"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-suggest/f-suggest.ts b/packages/flow-core/src/components/f-suggest/f-suggest.ts index 2f8378091..3b40bdc8e 100644 --- a/packages/flow-core/src/components/f-suggest/f-suggest.ts +++ b/packages/flow-core/src/components/f-suggest/f-suggest.ts @@ -36,7 +36,7 @@ export type FSuggestWhen = (suggestion: string | FSuggestTemplate, value?: strin export type FSuggestSuggestions = string[] | FSuggestSuggestionsCategory | FSuggestTemplate[]; export class FSuggest extends FRoot { - static tagName = "f-suggest"; + static readonly tagName = "f-suggest"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-switch/f-switch.ts b/packages/flow-core/src/components/f-switch/f-switch.ts index 018e00786..56ec74291 100644 --- a/packages/flow-core/src/components/f-switch/f-switch.ts +++ b/packages/flow-core/src/components/f-switch/f-switch.ts @@ -15,7 +15,7 @@ export type FSwitchCustomEvent = { }; export class FSwitch extends FRoot { - static tagName = "f-switch"; + static readonly tagName = "f-switch"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-tab-content/f-tab-content.ts b/packages/flow-core/src/components/f-tab-content/f-tab-content.ts index 0680faea9..0f5923b59 100644 --- a/packages/flow-core/src/components/f-tab-content/f-tab-content.ts +++ b/packages/flow-core/src/components/f-tab-content/f-tab-content.ts @@ -7,7 +7,7 @@ import { injectCss } from "@ollion/flow-core-config"; injectCss("f-tab-content", globalStyle); export class FTabContent extends FRoot { - static tagName = "f-tab-content"; + static readonly tagName = "f-tab-content"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-tab-node/f-tab-node.ts b/packages/flow-core/src/components/f-tab-node/f-tab-node.ts index 111d78c8a..e4915c9ba 100644 --- a/packages/flow-core/src/components/f-tab-node/f-tab-node.ts +++ b/packages/flow-core/src/components/f-tab-node/f-tab-node.ts @@ -9,7 +9,7 @@ import { injectCss } from "@ollion/flow-core-config"; injectCss("f-tab-node", globalStyle); export class FTabNode extends FRoot { - static tagName = "f-tab-node"; + static readonly tagName = "f-tab-node"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-tab/f-tab.ts b/packages/flow-core/src/components/f-tab/f-tab.ts index 3a4a9f2fa..eaf454abb 100644 --- a/packages/flow-core/src/components/f-tab/f-tab.ts +++ b/packages/flow-core/src/components/f-tab/f-tab.ts @@ -13,7 +13,7 @@ injectCss("f-tab", globalStyle); export type FTabNodeWidthProp = "fill" | "hug-content" | `${number}`; export class FTab extends FRoot { - static tagName = "f-tab"; + static readonly tagName = "f-tab"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-tag/f-tag.ts b/packages/flow-core/src/components/f-tag/f-tag.ts index 25f4f60ba..8a826c221 100644 --- a/packages/flow-core/src/components/f-tag/f-tag.ts +++ b/packages/flow-core/src/components/f-tag/f-tag.ts @@ -37,7 +37,7 @@ export type FTagCategory = "fill" | "outline"; */ export class FTag extends FRoot { - static tagName = "f-tag"; + static readonly tagName = "f-tag"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-template/f-template.ts b/packages/flow-core/src/components/f-template/f-template.ts index 45da7fa55..3c088f82d 100644 --- a/packages/flow-core/src/components/f-template/f-template.ts +++ b/packages/flow-core/src/components/f-template/f-template.ts @@ -6,7 +6,7 @@ import { injectCss } from "@ollion/flow-core-config"; injectCss("f-template", globalStyle); export class FTemplate extends FRoot { - static tagName = "f-template"; + static readonly tagName = "f-template"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-text-area/f-text-area.ts b/packages/flow-core/src/components/f-text-area/f-text-area.ts index f126efdf8..b9dc27be8 100644 --- a/packages/flow-core/src/components/f-text-area/f-text-area.ts +++ b/packages/flow-core/src/components/f-text-area/f-text-area.ts @@ -16,7 +16,7 @@ export type FTextAreaCustomEvent = { }; export class FTextArea extends FRoot { - static tagName = "f-text-area"; + static readonly tagName = "f-text-area"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-text/f-text.ts b/packages/flow-core/src/components/f-text/f-text.ts index a6dccfdf1..a6063dc37 100644 --- a/packages/flow-core/src/components/f-text/f-text.ts +++ b/packages/flow-core/src/components/f-text/f-text.ts @@ -28,7 +28,7 @@ export type FTextStateProp = */ export class FText extends FRoot { - static tagName = "f-text"; + static readonly tagName = "f-text"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-toast/f-toast.ts b/packages/flow-core/src/components/f-toast/f-toast.ts index cbc7cd024..164038789 100644 --- a/packages/flow-core/src/components/f-toast/f-toast.ts +++ b/packages/flow-core/src/components/f-toast/f-toast.ts @@ -14,7 +14,7 @@ injectCss("f-toast", globalStyle); export type FToastState = "default" | "primary" | "success" | "warning" | "danger"; export class FToast extends FRoot { - static tagName = "f-toast"; + static readonly tagName = "f-toast"; /** * css loaded from scss file */ diff --git a/packages/flow-core/src/components/f-tooltip/f-tooltip.ts b/packages/flow-core/src/components/f-tooltip/f-tooltip.ts index 0de5aa56a..52571f1e2 100644 --- a/packages/flow-core/src/components/f-tooltip/f-tooltip.ts +++ b/packages/flow-core/src/components/f-tooltip/f-tooltip.ts @@ -24,7 +24,7 @@ export type FTooltipPlacement = | "auto"; export class FTooltip extends LitElement { - static tagName = "f-tooltip"; + static readonly tagName = "f-tooltip"; /** * css loaded from scss file */ diff --git a/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts b/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts index 14e8b19b5..83fd18513 100644 --- a/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts +++ b/packages/flow-form-builder/src/components/f-checkbox-group/f-checkbox-group.ts @@ -12,7 +12,7 @@ import { injectCss } from "@ollion/flow-core-config"; injectCss("f-checkbox-group", globalStyle); export class FCheckboxGroup extends FRoot { - static tagName = "f-checkbox-group"; + static readonly tagName = "f-checkbox-group"; /** * css loaded from scss file */ diff --git a/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts b/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts index 95223833c..981d729c5 100644 --- a/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts +++ b/packages/flow-form-builder/src/components/f-field-separator/f-field-separator.ts @@ -10,7 +10,7 @@ injectCss("f-field-separator", globalStyle); export type FFieldSeparatorState = FDividerState; export class FFieldSeparator extends FRoot { - static tagName = "f-field-separator"; + static readonly tagName = "f-field-separator"; /** * css loaded from scss file */ diff --git a/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts b/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts index 0d509dbd9..f5763d7df 100644 --- a/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts +++ b/packages/flow-form-builder/src/components/f-form-array/f-form-array.ts @@ -37,7 +37,7 @@ export type ArrayValueType = ( )[]; export class FFormArray extends FRoot { - static tagName = "f-form-array"; + static readonly tagName = "f-form-array"; /** * css loaded from scss file */ diff --git a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts index be434caa0..4af3f2e01 100644 --- a/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts +++ b/packages/flow-form-builder/src/components/f-form-builder/f-form-builder.ts @@ -33,7 +33,7 @@ import formArrayGlobalStyles from "./../f-form-array/f-form-array-global.scss?in injectCss("f-form-builder", globalStyle); export class FFormBuilder extends FRoot { - static tagName = "f-form-builder"; + static readonly tagName = "f-form-builder"; /** * css loaded from scss file */ diff --git a/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts b/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts index 9a1026f98..dc6f470ff 100644 --- a/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts +++ b/packages/flow-form-builder/src/components/f-form-object/f-form-object.ts @@ -30,7 +30,7 @@ export type ObjectValueType = Record< >; export class FFormObject extends FRoot { - static tagName = "f-form-object"; + static readonly tagName = "f-form-object"; /** * css loaded from scss file */ diff --git a/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts b/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts index 4599267fe..43e85dfdb 100644 --- a/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts +++ b/packages/flow-form-builder/src/components/f-radio-group/f-radio-group.ts @@ -16,7 +16,7 @@ export const radioGroupStyles = eleStyle; */ export class FRadioGroup extends FRoot { - static tagName = "f-radio-group"; + static readonly tagName = "f-radio-group"; /** * css loaded from scss file */ diff --git a/packages/flow-lineage/src/components/f-lineage/f-lineage.ts b/packages/flow-lineage/src/components/f-lineage/f-lineage.ts index 62885a88a..e67b6e0eb 100644 --- a/packages/flow-lineage/src/components/f-lineage/f-lineage.ts +++ b/packages/flow-lineage/src/components/f-lineage/f-lineage.ts @@ -29,7 +29,7 @@ injectCss("f-lineage", globalStyle); // Renders attribute names of parent element to textContent export class FLineage extends FRoot { - static tagName = "f-lineage"; + static readonly tagName = "f-lineage"; /** * css loaded from scss file */ diff --git a/packages/flow-log/src/components/f-log/f-log.ts b/packages/flow-log/src/components/f-log/f-log.ts index 7d0797083..df193b17b 100644 --- a/packages/flow-log/src/components/f-log/f-log.ts +++ b/packages/flow-log/src/components/f-log/f-log.ts @@ -47,7 +47,7 @@ export type FLogLevels = string[]; */ export class FLog extends FRoot { - static tagName = "f-log"; + static readonly tagName = "f-log"; /** * css loaded from scss file */ diff --git a/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.ts b/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.ts index d56913502..272efefcc 100644 --- a/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.ts +++ b/packages/flow-md-editor/src/components/f-md-editor/f-md-editor.ts @@ -10,7 +10,7 @@ import { injectCss } from "@ollion/flow-core-config"; injectCss("f-md-editor", globalStyle); export class FMDEditor extends FRoot { - static tagName = "f-md-editor"; + static readonly tagName = "f-md-editor"; /** * css loaded from scss file */ diff --git a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts index 5b72976b2..945034234 100644 --- a/packages/flow-table/src/components/f-table-schema/f-table-schema.ts +++ b/packages/flow-table/src/components/f-table-schema/f-table-schema.ts @@ -54,7 +54,7 @@ export type FTableSchemaHeaderCellemplate = (value: T) => HTMLTemplateR export type FTableSchemaStickyBackground = "default" | "secondary" | "tertiary" | "subtle"; export class FTableSchema extends FRoot { - static tagName = "f-table-schema"; + static readonly tagName = "f-table-schema"; /** * css loaded from scss file */ diff --git a/packages/flow-table/src/components/f-table/f-table.ts b/packages/flow-table/src/components/f-table/f-table.ts index f958e4bb9..89ffd3f33 100644 --- a/packages/flow-table/src/components/f-table/f-table.ts +++ b/packages/flow-table/src/components/f-table/f-table.ts @@ -13,7 +13,7 @@ export type FTableSize = "medium" | "small"; export type FTableSelectable = "single" | "multiple" | "none"; export class FTable extends FRoot { - static tagName = "f-table"; + static readonly tagName = "f-table"; /** * css loaded from scss file */ diff --git a/packages/flow-table/src/components/f-tcell/f-tcell.ts b/packages/flow-table/src/components/f-tcell/f-tcell.ts index 9d11df6cf..7e81bd31e 100644 --- a/packages/flow-table/src/components/f-tcell/f-tcell.ts +++ b/packages/flow-table/src/components/f-tcell/f-tcell.ts @@ -34,7 +34,7 @@ export type FTcellAlign = | "bottom-right"; export class FTcell extends FRoot { - static tagName = "f-tcell"; + static readonly tagName = "f-tcell"; /** * css loaded from scss file */ diff --git a/packages/flow-table/src/components/f-trow/f-trow.ts b/packages/flow-table/src/components/f-trow/f-trow.ts index 77c74a8ad..524f604dd 100644 --- a/packages/flow-table/src/components/f-trow/f-trow.ts +++ b/packages/flow-table/src/components/f-trow/f-trow.ts @@ -20,7 +20,7 @@ export type FTrowState = export type FTrowChevronPosition = "left" | "right"; export class FTrow extends FRoot { - static tagName = "f-trow"; + static readonly tagName = "f-trow"; /** * css loaded from scss file */ From 0b7c1d29033a252a91f7c146adc411854f007fa7 Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Mon, 29 Apr 2024 21:01:17 +0530 Subject: [PATCH 13/13] manual-register tagName made readonly --- .../flow-core/src/components/f-breadcrumb/f-breadcrumb.ts | 4 ++-- .../flow-core/src/components/f-countdown/f-countdown.ts | 8 ++++---- .../src/components/f-icon-button/f-icon-button.ts | 6 +++--- .../flow-core/src/components/f-pictogram/f-pictogram.ts | 8 ++++---- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts index f33b51f98..ae349bcd1 100644 --- a/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts +++ b/packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts @@ -17,8 +17,8 @@ const sizes = ["medium", "small"] as const; export type FBreadCrumbsProp = { tabIndex: number; title: string; icon?: string }; export type FBreadcrumbs = FBreadCrumbsProp[]; -export type FBreadcrumbSize = typeof sizes[number]; -export type FBreadcrumbVariant = typeof variants[number]; +export type FBreadcrumbSize = (typeof sizes)[number]; +export type FBreadcrumbVariant = (typeof variants)[number]; export class FBreadcrumb extends FRoot { static readonly tagName = "f-breadcrumb"; diff --git a/packages/flow-core/src/components/f-countdown/f-countdown.ts b/packages/flow-core/src/components/f-countdown/f-countdown.ts index 68ddac631..3c8716fff 100644 --- a/packages/flow-core/src/components/f-countdown/f-countdown.ts +++ b/packages/flow-core/src/components/f-countdown/f-countdown.ts @@ -16,10 +16,10 @@ const sizes = ["large", "medium", "small", "x-small"] as const; const categories = ["fill", "outline"] as const; const placements = ["left", "right", "bottom", "top", "none"] as const; -export type FCountdownStateProp = typeof states[number]; -export type FCountdownCategoryProp = typeof categories[number]; -export type FCountdownSizesProp = typeof sizes[number]; -export type FCountdownLabelProp = typeof placements[number]; +export type FCountdownStateProp = (typeof states)[number]; +export type FCountdownCategoryProp = (typeof categories)[number]; +export type FCountdownSizesProp = (typeof sizes)[number]; +export type FCountdownLabelProp = (typeof placements)[number]; export type FCountdownDuration = number | string; export class FCountdown extends FRoot { diff --git a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts index 919797d1c..0dcfd3fac 100644 --- a/packages/flow-core/src/components/f-icon-button/f-icon-button.ts +++ b/packages/flow-core/src/components/f-icon-button/f-icon-button.ts @@ -21,9 +21,9 @@ const variants = ["round", "curved", "block"] as const; const categories = ["fill", "outline", "transparent", "packed"] as const; const sizes = ["large", "medium", "small", "x-small"] as const; -export type FIconButtonVariant = typeof variants[number]; -export type FIconButtonType = typeof categories[number]; -export type FIconButtonSize = typeof sizes[number]; +export type FIconButtonVariant = (typeof variants)[number]; +export type FIconButtonType = (typeof categories)[number]; +export type FIconButtonSize = (typeof sizes)[number]; export type FIconButtonState = | "primary" | "danger" diff --git a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts index 95aea1eed..ba1610548 100644 --- a/packages/flow-core/src/components/f-pictogram/f-pictogram.ts +++ b/packages/flow-core/src/components/f-pictogram/f-pictogram.ts @@ -15,10 +15,10 @@ const category = ["fill", "outline"] as const; const sizes = ["x-large", "large", "medium", "small"] as const; const states = ["primary", "danger", "warning", "success", "default", "inherit"] as const; -export type FPictogramVariant = typeof variants[number]; -export type FPictogramCategory = typeof category[number]; -export type FPictogramSize = typeof sizes[number]; -export type FPictogramState = typeof states[number]; +export type FPictogramVariant = (typeof variants)[number]; +export type FPictogramCategory = (typeof category)[number]; +export type FPictogramSize = (typeof sizes)[number]; +export type FPictogramState = (typeof states)[number]; let colors = [ "#FFB900",