Merge pull request #539 from mjashanks/remove-md-components
Remove materialdesign-components packages, and all references
This commit is contained in:
Michael Shanks
GitHub
commit
213f019c09
|
|
@ -478,44 +478,6 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/BasicCard",
|
||||
name: "Card",
|
||||
description:
|
||||
"A basic card component that can contain content and actions.",
|
||||
icon: "ri-layout-bottom-line",
|
||||
children: [],
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
{
|
||||
label: "Heading",
|
||||
key: "heading",
|
||||
control: Input,
|
||||
placeholder: "text",
|
||||
},
|
||||
{
|
||||
label: "Subheading",
|
||||
key: "subheading",
|
||||
control: Input,
|
||||
placeholder: "text",
|
||||
},
|
||||
{
|
||||
label: "Content",
|
||||
key: "content",
|
||||
control: Input,
|
||||
placeholder: "text",
|
||||
},
|
||||
{
|
||||
label: "Image",
|
||||
key: "imageUrl",
|
||||
control: Input,
|
||||
placeholder: "src",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Table",
|
||||
_component: "@budibase/standard-components/datatable",
|
||||
|
|
@ -564,11 +526,6 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
template: {
|
||||
component: "@budibase/materialdesign-components/Form",
|
||||
description: "Form for saving a record",
|
||||
name: "@budibase/materialdesign-components/recordForm",
|
||||
},
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/dataformwide",
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@budibase/standard-components": "0.x",
|
||||
"@budibase/materialdesign-components": "0.x"
|
||||
"@budibase/standard-components": "0.x"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"title": "Test App",
|
||||
"favicon": "./_shared/favicon.png",
|
||||
"stylesheets": [],
|
||||
"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
|
||||
"componentLibraries": ["@budibase/standard-components"],
|
||||
"props" : {
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"_children": [],
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"title": "Test App",
|
||||
"favicon": "./_shared/favicon.png",
|
||||
"stylesheets": [],
|
||||
"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
|
||||
"componentLibraries": ["@budibase/standard-components"],
|
||||
"props" : {
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"_children": [],
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"title": "Test App",
|
||||
"favicon": "./_shared/favicon.png",
|
||||
"stylesheets": [],
|
||||
"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
|
||||
"componentLibraries": ["@budibase/standard-components" ],
|
||||
"props" : {
|
||||
"_component": "@budibase/standard-components/container",
|
||||
"_children": [],
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
dist/*
|
||||
public/build
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
*
|
||||
!dist/*
|
||||
!components.json
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
*Psst — looking for an app template? Go here --> [sveltejs/template](https://github.com/sveltejs/template)*
|
||||
|
||||
---
|
||||
|
||||
# component-template
|
||||
|
||||
A base for building shareable Svelte components. Clone it with [degit](https://github.com/Rich-Harris/degit):
|
||||
|
||||
```bash
|
||||
npx degit sveltejs/component-template my-new-component
|
||||
cd my-new-component
|
||||
npm install # or yarn
|
||||
```
|
||||
|
||||
Your component's source code lives in `src/index.html`.
|
||||
|
||||
TODO
|
||||
|
||||
* [ ] some firm opinions about the best way to test components
|
||||
* [ ] update `degit` so that it automates some of the setup work
|
||||
|
||||
|
||||
## Setting up
|
||||
|
||||
* Run `npm init` (or `yarn init`)
|
||||
* Replace this README with your own
|
||||
|
||||
|
||||
## Consuming components
|
||||
|
||||
Your package.json has a `"svelte"` field pointing to `src/index.html`, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte) or [svelte-loader](https://github.com/sveltejs/svelte-loader) (where [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config includes `"svelte"`). **This is recommended.**
|
||||
|
||||
For everyone else, `npm run build` will bundle your component's source code into a plain JavaScript module (`index.mjs`) and a UMD script (`index.js`). This will happen automatically when you publish your component to npm, courtesy of the `prepublishOnly` hook in package.json.
|
||||
|
|
@ -1,458 +0,0 @@
|
|||
{
|
||||
"_lib": "./dist/index.js",
|
||||
"_templates": {
|
||||
"indexDatatable": {
|
||||
"description": "Datatable based on an Index",
|
||||
"component": "Datatable"
|
||||
},
|
||||
"recordForm": {
|
||||
"description": "Form for saving a record",
|
||||
"component": "Form"
|
||||
}
|
||||
},
|
||||
"Body1": {
|
||||
"name": "Body1",
|
||||
"description": "Sets the font properties as Roboto Body 1",
|
||||
"props": {
|
||||
"text": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"Body2": {
|
||||
"name": "Body2",
|
||||
"description": "Sets the font properties as Roboto Body 2",
|
||||
"props": {
|
||||
"text": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"Select": {
|
||||
"name": "Select",
|
||||
"description": "A material design select (aka Dropdown, aka Combobox)",
|
||||
"props": {
|
||||
"onSelect": "event",
|
||||
"value": "string",
|
||||
"width": "string",
|
||||
"variant": {
|
||||
"type": "options",
|
||||
"options": [
|
||||
"filled", "outlined"
|
||||
]
|
||||
},
|
||||
"disabled": "bool",
|
||||
"required": "bool",
|
||||
"label": "string",
|
||||
"helperText": "string",
|
||||
"persistent": "bool"
|
||||
}
|
||||
},
|
||||
"List": {
|
||||
"name": "List",
|
||||
"description": "A Material Design List Component.",
|
||||
"props": {
|
||||
"onSelect": "event",
|
||||
"singleSelection": "bool",
|
||||
"variant": {
|
||||
"type": "options",
|
||||
"options": ["one-line", "two-line"],
|
||||
"default": "one-line"
|
||||
},
|
||||
"inputElement": {
|
||||
"type": "options",
|
||||
"options": ["None", "Radiobutton", "Checkbox"],
|
||||
"default": "None"
|
||||
}
|
||||
}
|
||||
},
|
||||
"ListItem": {
|
||||
"name": "ListItem",
|
||||
"description": "Use as item in a 'List' or 'Select' component",
|
||||
"props": {
|
||||
"value": "string",
|
||||
"text": "string",
|
||||
"secondaryText": "string",
|
||||
"leadingIcon": "string",
|
||||
"trailingIcon": "string",
|
||||
"disabled": "bool",
|
||||
"dividerAfter": "bool"
|
||||
}
|
||||
},
|
||||
"Button": {
|
||||
"name": "Button",
|
||||
"children": false,
|
||||
"description": "A Material Design button with different variations. It renders as an anchor if href is passed to it.",
|
||||
"props": {
|
||||
"onClick": "event",
|
||||
"variant": {
|
||||
"type": "options",
|
||||
"options": ["text", "raised", "unelevated", "outlined"],
|
||||
"default": "text"
|
||||
},
|
||||
"colour": {
|
||||
"type": "options",
|
||||
"options": ["primary", "secondary"],
|
||||
"default": "primary"
|
||||
},
|
||||
"size": {
|
||||
"type": "options",
|
||||
"options": ["small", "medium", "large"],
|
||||
"default": "medium"
|
||||
},
|
||||
"href": "string",
|
||||
"icon": "string",
|
||||
"trailingIcon": "bool",
|
||||
"fullwidth": "bool",
|
||||
"text": "string",
|
||||
"disabled": "bool"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"Caption": {
|
||||
"name": "Caption",
|
||||
"description": "Sets the font properties as Roboto Caption",
|
||||
"props": {
|
||||
"text": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"BasicCard": {
|
||||
"name": "BasicCard",
|
||||
"description": "This is a basic card",
|
||||
"props": {
|
||||
"heading": "string",
|
||||
"subheading": "string",
|
||||
"content": "string",
|
||||
"imageUrl": "string",
|
||||
"button1Text": "string",
|
||||
"button2Text": "string",
|
||||
"cardClick": "event",
|
||||
"button1Click": "event",
|
||||
"button2Click": "event"
|
||||
}
|
||||
},
|
||||
"Card": {
|
||||
"name": "Card",
|
||||
"description": "A Material Card container. Accepts CardHeader, CardBody and CardFooter as possible children",
|
||||
"props": {
|
||||
"width": {"type": "string", "default": "350px"},
|
||||
"height": "string",
|
||||
"variant": {
|
||||
"type": "options",
|
||||
"options": ["standard", "outlined"],
|
||||
"default": "outlined"
|
||||
}
|
||||
}
|
||||
},
|
||||
"CardBody": {
|
||||
"name": "CardBody",
|
||||
"description": "A Material CardBody component. Contains the main content of a Material Card component",
|
||||
"props": {
|
||||
"onClick": "event"
|
||||
}
|
||||
},
|
||||
"CardImage": {
|
||||
"name": "CardImage",
|
||||
"description": "An image component for the Material Card component",
|
||||
"props": {
|
||||
"displayHorizontal": "bool",
|
||||
"url": "string",
|
||||
"title": "string",
|
||||
"subtitle": "string"
|
||||
}
|
||||
},
|
||||
"CardHeader": {
|
||||
"name": "CardHeader",
|
||||
"description": "Displays a icon, title and subtitle above main body of the Material Card component",
|
||||
"props": {
|
||||
"title": "string",
|
||||
"subtitle": "string",
|
||||
"icon": "string"
|
||||
}
|
||||
},
|
||||
"CardFooter": {
|
||||
"name": "CardFooter",
|
||||
"description": "Displays buttons / icon buttons as actions for the Material Card component",
|
||||
"props": {
|
||||
"padding": "string"
|
||||
}
|
||||
},
|
||||
"Checkbox": {
|
||||
"name": "Checkbox",
|
||||
"description": "A Material Design checkbox. Supports aligning label before or after checkbox.",
|
||||
"props": {
|
||||
"onClick": "event",
|
||||
"id": "string",
|
||||
"label": "string",
|
||||
"disabled": "bool",
|
||||
"alignEnd": "bool",
|
||||
"indeterminate": "bool",
|
||||
"checked": "bool"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"Checkboxgroup": {
|
||||
"name": "Checkboxgroup",
|
||||
"description": "A group of material design checkboxes. Supports row and column orientation.",
|
||||
"props": {
|
||||
"onChange": "event",
|
||||
"label":"string",
|
||||
"orientation": {
|
||||
"type": "options",
|
||||
"options": ["row", "column"],
|
||||
"default": "row"
|
||||
},
|
||||
"disabled": "bool",
|
||||
"alignEnd": "bool"
|
||||
}
|
||||
},
|
||||
"Datatable": {
|
||||
"name": "Datatable",
|
||||
"description": "A Material Design component to represent tabular data.",
|
||||
"props": {
|
||||
"onLoad":"event"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"DatatableHead": {
|
||||
"name": "DatatableHead",
|
||||
"description": "Material Design <thead>.",
|
||||
"props": {}
|
||||
},
|
||||
"DatatableCell": {
|
||||
"name": "DatatableCell",
|
||||
"description": "Material Design <td>.",
|
||||
"props": {}
|
||||
},
|
||||
"DatatableBody": {
|
||||
"name": "DatatableBody",
|
||||
"description": "Material Design <tbody>.",
|
||||
"props": {}
|
||||
},
|
||||
"DatatableRow": {
|
||||
"name": "DatatableRow",
|
||||
"description": "Material Design <tr>.",
|
||||
"props": {}
|
||||
},
|
||||
"DatePicker": {
|
||||
"name": "DatePicker",
|
||||
"description": "Material Design DatePicker",
|
||||
"props": {
|
||||
"date": "string",
|
||||
"label": "string",
|
||||
"onSelect": "event"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"H1": {
|
||||
"name": "H1",
|
||||
"description": "Sets the font properties as Roboto Headline1",
|
||||
"props": {
|
||||
"text": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"H2": {
|
||||
"name": "H2",
|
||||
"description": "Sets the font properties as Roboto Headline2",
|
||||
"props": {
|
||||
"text": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"H3": {
|
||||
"name": "H3",
|
||||
"description": "Sets the font properties as Roboto Headline3",
|
||||
"props": {
|
||||
"text": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"H4": {
|
||||
"name": "H4",
|
||||
"description": "Sets the font properties as Roboto Headline4",
|
||||
"props": {
|
||||
"text": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"H5": {
|
||||
"name": "H5",
|
||||
"description": "Sets the font properties as Roboto Headline5",
|
||||
"props": {
|
||||
"text": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"H6": {
|
||||
"name": "H6",
|
||||
"description": "Sets the font properties as Roboto Headline6",
|
||||
"props": {
|
||||
"text": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"IconButton": {
|
||||
"name": "IconButton",
|
||||
"description": "An icon button component",
|
||||
"props": {
|
||||
"onClick": "event",
|
||||
"disabled": "bool",
|
||||
"href": "string",
|
||||
"icon": "string",
|
||||
"size": {
|
||||
"type":"options",
|
||||
"options": ["small", "medium", "large"],
|
||||
"default": "medium"
|
||||
}
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"Label": {
|
||||
"name": "Label",
|
||||
"description": "A simple label component that displays its text in the standard Roboto Material Design font",
|
||||
"props": {
|
||||
"text": "string",
|
||||
"bold": "bool"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"Menu": {
|
||||
"name": "Menu",
|
||||
"description": "A Material Design menu component. Anchor to other components to create a pop-out menu.",
|
||||
"props": {
|
||||
"onSelect": "event",
|
||||
"width": "string",
|
||||
"open": "bool",
|
||||
"useFixedPosition": "bool",
|
||||
"absolutePositionX": "number",
|
||||
"absolutePositionY": "number"
|
||||
}
|
||||
},
|
||||
"Overline": {
|
||||
"name": "Overline",
|
||||
"description": "Sets the font properties as Roboto Overline",
|
||||
"props": {
|
||||
"text": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"Radiobutton": {
|
||||
"name": "Radiobutton",
|
||||
"description": "A Material Design radiobutton. Supports aligning label before or after radiobutton.",
|
||||
"props": {
|
||||
"onClick": "event",
|
||||
"id": "string",
|
||||
"label": "string",
|
||||
"name": "string",
|
||||
"disabled": "bool",
|
||||
"alignEnd": "bool"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"Radiobuttongroup": {
|
||||
"name": "Radiobuttongroup",
|
||||
"description": "A Material Design Radiobutton group. Supports row and column orientation.",
|
||||
"props": {
|
||||
"onChange": "event",
|
||||
"label": "string",
|
||||
"name": "string",
|
||||
"orientation": {
|
||||
"type": "options",
|
||||
"options": ["row", "column"],
|
||||
"default": "row"
|
||||
},
|
||||
"fullwidth": "bool",
|
||||
"alignEnd": "bool",
|
||||
"disabled": "bool"
|
||||
}
|
||||
},
|
||||
"Sub1": {
|
||||
"name": "Sub1",
|
||||
"description": "Sets the font properties as Roboto Subtitle1",
|
||||
"props": {
|
||||
"text": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"Sub2": {
|
||||
"name": "Sub2",
|
||||
"description": "Sets the font properties as Roboto Subtitle2",
|
||||
"props": {
|
||||
"text": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"Textfield": {
|
||||
"name": "Textfield",
|
||||
"description": "A Material Design textfield with multiple variants. Can also be converted to a text area / multine text field.",
|
||||
"props": {
|
||||
"onChange": "event",
|
||||
"value": "string",
|
||||
"label": "string",
|
||||
"variant": {
|
||||
"type": "options",
|
||||
"options": ["standard", "outlined", "filled"],
|
||||
"default": "standard"
|
||||
},
|
||||
"disabled": "bool",
|
||||
"fullwidth": "bool",
|
||||
"colour": {
|
||||
"type": "options",
|
||||
"options": ["primary", "secondary"],
|
||||
"default": "primary"
|
||||
},
|
||||
"size":{
|
||||
"type": "options",
|
||||
"options": ["small", "medium", "large"],
|
||||
"default": "medium"
|
||||
},
|
||||
"type": {
|
||||
"type": "options",
|
||||
"options": ["text", "password"],
|
||||
"default": "text"
|
||||
},
|
||||
"required": "bool",
|
||||
"minLength": "number",
|
||||
"maxLength": "number",
|
||||
"helperText": "string",
|
||||
"placeholder": "string",
|
||||
"icon": "string",
|
||||
"trailingIcon": "bool",
|
||||
"textarea": "bool",
|
||||
"persistent": "bool"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"Switch": {
|
||||
"name": "Switch",
|
||||
"description": "A material design switch component",
|
||||
"props": {
|
||||
"alignEnd": "bool",
|
||||
"disabled": "bool",
|
||||
"checked": "bool",
|
||||
"label": "string",
|
||||
"id": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"Slider": {
|
||||
"name": "Slider",
|
||||
"description": "A material design slider component",
|
||||
"props": {
|
||||
"variant": {
|
||||
"type": "options",
|
||||
"options": ["continuous", "discrete"],
|
||||
"default": "continuous"
|
||||
},
|
||||
"showTicks": "bool",
|
||||
"min": "number",
|
||||
"max": "number",
|
||||
"value": "number",
|
||||
"step": "number",
|
||||
"label": "string",
|
||||
"disabled": "bool"
|
||||
},
|
||||
"tags": []
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
{
|
||||
"name": "@budibase/materialdesign-components",
|
||||
"svelte": "src/index.svelte",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.js",
|
||||
"scripts": {
|
||||
"build": "rollup -c",
|
||||
"prepublishOnly": "npm run build",
|
||||
"testbuild": "rollup -w -c rollup.testconfig.js",
|
||||
"dev": "run-p start:dev testbuild",
|
||||
"start:dev": "sirv public --single --dev",
|
||||
"dev:builder": "rollup -cw"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@budibase/client": "^0.1.17",
|
||||
"@budibase/standard-components": "^0.1.17",
|
||||
"@material/button": "^4.0.0",
|
||||
"@material/checkbox": "^4.0.0",
|
||||
"@material/data-table": "4.0.0",
|
||||
"@material/dialog": "4.0.0",
|
||||
"@material/form-field": "^4.0.0",
|
||||
"@material/icon-button": "4.0.0",
|
||||
"@material/list": "4.0.0",
|
||||
"@material/menu": "4.0.0",
|
||||
"@material/radio": "^4.0.0",
|
||||
"@material/select": "4.0.0",
|
||||
"@material/slider": "4.0.0",
|
||||
"@material/switch": "4.0.0",
|
||||
"@material/textfield": "^4.0.0",
|
||||
"@nx-js/compiler-util": "^2.0.0",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"date-fns": "^2.10.0",
|
||||
"fs-extra": "^8.1.0",
|
||||
"lodash": "^4.17.15",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"rollup": "^1.11.0",
|
||||
"rollup-plugin-alias": "^2.2.0",
|
||||
"rollup-plugin-commonjs": "^10.0.2",
|
||||
"rollup-plugin-json": "^4.0.0",
|
||||
"rollup-plugin-livereload": "^1.0.1",
|
||||
"rollup-plugin-node-resolve": "^5.0.0",
|
||||
"rollup-plugin-postcss": "^2.0.5",
|
||||
"rollup-plugin-svelte": "^5.0.0",
|
||||
"rollup-plugin-terser": "^5.1.1",
|
||||
"sass": "^1.25.1-test.1",
|
||||
"shortid": "^2.2.15",
|
||||
"sirv-cli": "^0.4.4",
|
||||
"svelte": "^3.12.1"
|
||||
},
|
||||
"keywords": [
|
||||
"svelte"
|
||||
],
|
||||
"version": "0.1.17",
|
||||
"license": "MIT",
|
||||
"gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
|
||||
"dependencies": {
|
||||
"@material/card": "4.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf8'>
|
||||
<meta name='viewport' content='width=device-width'>
|
||||
|
||||
<title>Budibase-Material Design</title>
|
||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src='/build/bundle.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import svelte from "rollup-plugin-svelte"
|
||||
import postcss from "rollup-plugin-postcss"
|
||||
import resolve from "rollup-plugin-node-resolve"
|
||||
import commonjs from "rollup-plugin-commonjs"
|
||||
|
||||
const postcssOptions = () => ({
|
||||
extensions: [".scss", ".sass"],
|
||||
extract: false,
|
||||
minimize: true,
|
||||
use: [
|
||||
[
|
||||
"sass",
|
||||
{
|
||||
includePaths: ["./node_modules"],
|
||||
},
|
||||
],
|
||||
],
|
||||
})
|
||||
|
||||
const coreExternal = ["shortid"]
|
||||
|
||||
export default {
|
||||
input: "src/index.js",
|
||||
output: [
|
||||
{
|
||||
file: "dist/index.js",
|
||||
format: "esm",
|
||||
name: "budibaseStandardComponents",
|
||||
sourcemap: true,
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
svelte({
|
||||
hydratable: true,
|
||||
}),
|
||||
resolve({
|
||||
preferBuiltins: true,
|
||||
browser: true,
|
||||
dedupe: importee => {
|
||||
return coreExternal.includes(importee)
|
||||
},
|
||||
}),
|
||||
commonjs({
|
||||
namedExports: {
|
||||
shortid: ["generate"],
|
||||
},
|
||||
}),
|
||||
postcss(postcssOptions()),
|
||||
],
|
||||
}
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
import svelte from "rollup-plugin-svelte"
|
||||
import resolve from "rollup-plugin-node-resolve"
|
||||
import commonjs from "rollup-plugin-commonjs"
|
||||
import livereload from "rollup-plugin-livereload"
|
||||
import { terser } from "rollup-plugin-terser"
|
||||
import json from "rollup-plugin-json"
|
||||
import alias from "rollup-plugin-alias"
|
||||
import postcss from "rollup-plugin-postcss"
|
||||
import path from "path"
|
||||
|
||||
const aliases = {
|
||||
resolve: [".js", ".svelte"],
|
||||
entries: [
|
||||
// { find: "@BBMD", replacement: path.resolve(__dirname, "dist/index.js") },
|
||||
{ find: "@BBMD", replacement: path.resolve(__dirname, "src/index.js") },
|
||||
],
|
||||
}
|
||||
|
||||
const postcssOptions = () => ({
|
||||
extensions: [".scss", ".sass"],
|
||||
extract: false,
|
||||
minimize: true,
|
||||
use: [
|
||||
[
|
||||
"sass",
|
||||
{
|
||||
includePaths: ["./node_modules"],
|
||||
},
|
||||
],
|
||||
],
|
||||
})
|
||||
|
||||
const production = !process.env.ROLLUP_WATCH
|
||||
|
||||
const lodash_fp_exports = [
|
||||
"find",
|
||||
"isUndefined",
|
||||
"split",
|
||||
"max",
|
||||
"last",
|
||||
"union",
|
||||
"reduce",
|
||||
"isObject",
|
||||
"cloneDeep",
|
||||
"some",
|
||||
"isArray",
|
||||
"map",
|
||||
"filter",
|
||||
"keys",
|
||||
"isFunction",
|
||||
"isEmpty",
|
||||
"countBy",
|
||||
"join",
|
||||
"includes",
|
||||
"flatten",
|
||||
"constant",
|
||||
"first",
|
||||
"intersection",
|
||||
"take",
|
||||
"has",
|
||||
"mapValues",
|
||||
"isString",
|
||||
"isBoolean",
|
||||
"isNull",
|
||||
"isNumber",
|
||||
"isObjectLike",
|
||||
"isDate",
|
||||
"clone",
|
||||
"values",
|
||||
"keyBy",
|
||||
"isNaN",
|
||||
"isInteger",
|
||||
"toNumber",
|
||||
]
|
||||
|
||||
const lodash_exports = [
|
||||
"flow",
|
||||
"head",
|
||||
"find",
|
||||
"each",
|
||||
"tail",
|
||||
"findIndex",
|
||||
"startsWith",
|
||||
"dropRight",
|
||||
"takeRight",
|
||||
"trim",
|
||||
"split",
|
||||
"replace",
|
||||
"merge",
|
||||
"assign",
|
||||
]
|
||||
|
||||
const coreExternal = [
|
||||
"lodash",
|
||||
"lodash/fp",
|
||||
"date-fns",
|
||||
"lunr",
|
||||
"safe-buffer",
|
||||
"shortid",
|
||||
"@nx-js/compiler-util",
|
||||
"bcryptjs",
|
||||
]
|
||||
|
||||
export default {
|
||||
input: "src/Test/testMain.js",
|
||||
output: {
|
||||
sourcemap: true,
|
||||
format: "iife",
|
||||
name: "app",
|
||||
file: "public/build/bundle.js",
|
||||
globals: {
|
||||
crypto: "crypto",
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
alias(aliases),
|
||||
svelte({
|
||||
// enable run-time checks when not in production
|
||||
dev: !production,
|
||||
// we'll extract any component CSS out into
|
||||
// a separate file — better for performance
|
||||
css: css => {
|
||||
css.write("public/build/bundle.css")
|
||||
},
|
||||
|
||||
hydratable: true,
|
||||
}),
|
||||
|
||||
// If you have external dependencies installed from
|
||||
// npm, you'll most likely need these plugins. In
|
||||
// some cases you'll need additional configuration —
|
||||
// consult the documentation for details:
|
||||
// https://github.com/rollup/rollup-plugin-commonjs
|
||||
resolve({
|
||||
browser: true,
|
||||
dedupe: importee => {
|
||||
return (
|
||||
importee === "svelte" ||
|
||||
importee.startsWith("svelte/") ||
|
||||
coreExternal.includes(importee)
|
||||
)
|
||||
},
|
||||
preferBuiltins: true,
|
||||
}),
|
||||
commonjs({
|
||||
namedExports: {
|
||||
"lodash/fp": lodash_fp_exports,
|
||||
lodash: lodash_exports,
|
||||
shortid: ["generate"],
|
||||
},
|
||||
}),
|
||||
json(),
|
||||
|
||||
// Watch the `public` directory and refresh the
|
||||
// browser on changes when not in production
|
||||
!production && livereload("public"),
|
||||
|
||||
// If we're building for production (npm run build
|
||||
// instead of npm run dev), minify
|
||||
production && terser(),
|
||||
postcss(postcssOptions()),
|
||||
],
|
||||
watch: {
|
||||
clearScreen: false,
|
||||
},
|
||||
}
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import Icon from "../Common/Icon.svelte"
|
||||
import ripple from "../Common/Ripple.js"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
|
||||
const cb = new ClassBuilder("button", ["primary", "medium", "text"])
|
||||
|
||||
export let _bb
|
||||
export let onClick
|
||||
|
||||
export let variant = "text"
|
||||
export let colour = "primary"
|
||||
export let size = "medium"
|
||||
|
||||
export let href = ""
|
||||
export let icon = ""
|
||||
export let trailingIcon = false
|
||||
export let fullwidth = false
|
||||
|
||||
export let text = ""
|
||||
export let disabled = false
|
||||
|
||||
onMount(() => {
|
||||
let ctx = _bb.getContext("BBMD:button:context")
|
||||
extras = [ctx]
|
||||
})
|
||||
|
||||
let extras = ""
|
||||
let modifiers = {}
|
||||
let customs = { size, colour }
|
||||
|
||||
if (!href) modifiers = { variant }
|
||||
|
||||
$: props = { modifiers, customs, extras }
|
||||
|
||||
$: blockClasses = cb.build({ props })
|
||||
const labelClass = cb.elem("label")
|
||||
|
||||
const clicked = () => _bb.call(onClick)
|
||||
|
||||
$: renderLeadingIcon = !!icon && !trailingIcon
|
||||
$: renderTrailingIcon = !!icon && trailingIcon
|
||||
</script>
|
||||
|
||||
{#if href}
|
||||
<a class={blockClasses} {href} on:click={clicked}>
|
||||
<span class={labelClass}>{text}</span>
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
use:ripple={{ colour }}
|
||||
class={blockClasses}
|
||||
class:fullwidth
|
||||
{disabled}
|
||||
on:click={clicked}>
|
||||
{#if renderLeadingIcon}
|
||||
<Icon context="button__icon" {icon} />
|
||||
{/if}
|
||||
<span class={labelClass}>{text}</span>
|
||||
{#if renderTrailingIcon}
|
||||
<Icon context="button__icon" {icon} />
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.mdc-button:not(.fullwidth) {
|
||||
width: fit-content;
|
||||
}
|
||||
.fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@import "@material/button/mdc-button.scss";
|
||||
@import "@material/ripple/mdc-ripple.scss";
|
||||
@import "./mixins.scss";
|
||||
|
||||
@include bbmd-button-styles();
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
@import "@material/feature-targeting/functions";
|
||||
@import "@material/feature-targeting/mixins";
|
||||
|
||||
@mixin bbmd-button-styles($query: mdc-feature-all()) {
|
||||
$feat-structure: mdc-feature-create-target($query, structure);
|
||||
|
||||
.bbmd-mdc-button--size-large {
|
||||
@include button-sizing($feat-structure, 21px, 40px, 15px);
|
||||
}
|
||||
|
||||
.bbmd-mdc-button--size-small {
|
||||
@include button-sizing($feat-structure, 9px, 32px, 13px);
|
||||
}
|
||||
|
||||
.bbmd-mdc-button--colour-secondary {
|
||||
//no feature target as relying on theme variable custom property
|
||||
@include mdc-button-ink-color(secondary);
|
||||
|
||||
&.mdc-button--raised,
|
||||
&.mdc-button--unelevated {
|
||||
@include mdc-button-container-fill-color(secondary);
|
||||
@include mdc-button-ink-color(on-secondary);
|
||||
}
|
||||
|
||||
&.mdc-button--outlined {
|
||||
@include mdc-button-outline-color(secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-sizing($feat, $padding, $height, $fontSize) {
|
||||
@include mdc-feature-targets($feat) {
|
||||
padding: 0px $padding;
|
||||
height: $height;
|
||||
}
|
||||
> .mdc-button__label {
|
||||
font-size: $fontSize;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import "./_index.scss"
|
||||
export { default as Button } from "./Button.svelte"
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<script>
|
||||
export let heading = ""
|
||||
export let subheading = ""
|
||||
export let content = ""
|
||||
export let imageUrl = ""
|
||||
export let button1Text = ""
|
||||
export let button2Text = ""
|
||||
export let cardClick = () => {}
|
||||
export let button1Click = () => {}
|
||||
export let button2Click = () => {}
|
||||
|
||||
$: showImage = !!imageUrl
|
||||
$: showButton1 = !!button1Text
|
||||
$: showButton2 = !!button2Text
|
||||
$: showButtons = !!showButton1 && !!showButton2
|
||||
</script>
|
||||
|
||||
<div class="mdc-card" on:click={cardClick}>
|
||||
<div class="mdc-card__primary-action demo-card__primary-action" tabindex="0">
|
||||
{#if showImage}
|
||||
<div
|
||||
class="mdc-card__media mdc-card__media--16-9 demo-card__media"
|
||||
style="background-image: url("{imageUrl}");" />
|
||||
{/if}
|
||||
<div class="pad">
|
||||
<div class="demo-card__primary">
|
||||
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">
|
||||
{heading}
|
||||
</h2>
|
||||
<h3
|
||||
class="demo-card__subtitle mdc-typography mdc-typography--subtitle2">
|
||||
{subheading}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="demo-card__secondary mdc-typography mdc-typography--body2">
|
||||
{content}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{#if showButtons}
|
||||
<div class="mdc-card__actions">
|
||||
<div class="mdc-card__action-buttons">
|
||||
{#if showButton1}
|
||||
<button class="mdc-button mdc-card__action mdc-card__action--button">
|
||||
<span class="mdc-button__ripple" on:click={button1Click} />
|
||||
{button1Text}
|
||||
</button>
|
||||
{/if}
|
||||
{#if showButton2}
|
||||
<button
|
||||
class="mdc-button mdc-card__action mdc-card__action--button"
|
||||
on:click={button2Click}>
|
||||
<span class="mdc-button__ripple" />
|
||||
{button2Text}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.pad {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<script>
|
||||
import CardHeader from "./CardHeader.svelte"
|
||||
import CardBody from "./CardBody.svelte"
|
||||
import CardImage from "./CardImage.svelte"
|
||||
import CardFooter from "./CardFooter.svelte"
|
||||
import { H2, H6, Body2 } from "../Typography"
|
||||
import { Button } from "../Button"
|
||||
import { IconButton } from "../IconButton"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
|
||||
export let width = "350px"
|
||||
export let height = "auto"
|
||||
export let variant = "standard"
|
||||
|
||||
export let _bb
|
||||
let card
|
||||
|
||||
const cb = new ClassBuilder("card", ["standard"])
|
||||
|
||||
$: modifiers = { variant }
|
||||
$: props = { modifiers }
|
||||
$: cardClass = cb.build({ props })
|
||||
|
||||
$: safeWidth = width !== "auto" && !/px$/.test(width) ? `${width}px` : width
|
||||
|
||||
$: safeHeight =
|
||||
height !== "auto" && !/px$/.test(height) ? `${height}px` : height
|
||||
|
||||
$: card && _bb.attachChildren(card)
|
||||
</script>
|
||||
|
||||
<div bind:this={card} class={`bbmd-card ${cardClass}`} />
|
||||
|
||||
<style>
|
||||
.bbmd-card {
|
||||
width: 350px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<script>
|
||||
export let _bb
|
||||
export let onClick = () => {}
|
||||
|
||||
export let clicked = () => _bb.call(onClick)
|
||||
|
||||
let cardBody
|
||||
|
||||
$: cardBody && _bb.attachChildren(cardBody)
|
||||
</script>
|
||||
|
||||
<div bind:this={cardBody} class="mdc-card__primary-action" on:click={clicked} />
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
let cardFooter
|
||||
export let _bb
|
||||
export let padding = "5px"
|
||||
|
||||
onMount(() => {
|
||||
_bb.setContext(
|
||||
"BBMD:icon-button:context",
|
||||
"mdc-card__action mdc-card__action--icon"
|
||||
)
|
||||
_bb.setContext(
|
||||
"BBMD:button:context",
|
||||
"mdc-card__action mdc-card__action--button"
|
||||
)
|
||||
})
|
||||
|
||||
$: cardFooter && _bb.attachChildren(cardFooter)
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={cardFooter}
|
||||
style={`padding: ${padding}`}
|
||||
class="mdc-card__actions bbmd-card__actions" />
|
||||
|
||||
<style>
|
||||
.bbmd-card__actions {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<script>
|
||||
import { H6, Sub2 } from "../Typography"
|
||||
import Icon from "../Common/Icon.svelte"
|
||||
export let _bb
|
||||
export let title = ""
|
||||
export let subtitle = ""
|
||||
export let icon = ""
|
||||
|
||||
$: useIcon = !!icon
|
||||
$: useSubtitle = !!subtitle
|
||||
</script>
|
||||
|
||||
<div class="card-header">
|
||||
{#if useIcon}
|
||||
<div class="card-header__icon">
|
||||
<Icon {icon} />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="card-header__title">
|
||||
<H6 text={title} />
|
||||
{#if useSubtitle}
|
||||
<Sub2 text={subtitle} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.card-header {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card-header__icon {
|
||||
flex: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card-header__title {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<script>
|
||||
import { H6, Sub2 } from "../Typography"
|
||||
export let _bb
|
||||
export let displayHorizontal = false //aligns image on row with title and subtitle text
|
||||
export let url = ""
|
||||
export let title = ""
|
||||
export let subtitle = ""
|
||||
|
||||
$: useTitle = !!title
|
||||
$: useSubTitle = !!subtitle
|
||||
</script>
|
||||
|
||||
{#if !displayHorizontal}
|
||||
<div
|
||||
class="my-card__media mdc-card__media mdc-card__media--16-9"
|
||||
style={`background-image: url(${url})`}>
|
||||
<div class="mdc-card__media-content bbmd-card-media__content">
|
||||
{#if useTitle}
|
||||
<H6 text={title} verticalMargin={0} horizontalMargin={10} />
|
||||
{#if useSubTitle}
|
||||
<Sub2 text={subtitle} horizontalMargin={10} />
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bbmd-card--horizontal">
|
||||
<div
|
||||
class="mdc-card__media mdc-card__media mdc-card__media--square
|
||||
bbmd-card--horizontal-image"
|
||||
style={`background-image: url(${url})`} />
|
||||
<div class="bbmd-card--horizontal-text">
|
||||
{#if useTitle}
|
||||
<H6 text={title} verticalMargin={0} horizontalMargin={10} />
|
||||
{#if useSubTitle}
|
||||
<Sub2 text={subtitle} horizontalMargin={10} />
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.bbmd-card--horizontal {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
.bbmd-card--horizontal-image {
|
||||
flex: 0 0 110px;
|
||||
}
|
||||
|
||||
.bbmd-card--horizontal-text {
|
||||
flex: 1;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
.bbmd-card-media__content {
|
||||
top: 125px;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import "@material/card/mdc-card.scss"
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import "./_styles.scss"
|
||||
export { default as Card } from "./Card.svelte"
|
||||
export { default as BasicCard } from "./BasicCard.svelte"
|
||||
export { default as CardBody } from "./CardBody.svelte"
|
||||
export { default as CardFooter } from "./CardFooter.svelte"
|
||||
export { default as CardHeader } from "./CardHeader.svelte"
|
||||
export { default as CardImage } from "./CardImage.svelte"
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
<script>
|
||||
import { onMount, onDestroy } from "svelte"
|
||||
import Formfield from "../Common/Formfield.svelte"
|
||||
import { fieldStore } from "../Common/FormfieldStore.js"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
import { MDCCheckbox } from "@material/checkbox"
|
||||
import { generate } from "shortid"
|
||||
|
||||
export let onChange = item => {}
|
||||
|
||||
export let _bb
|
||||
|
||||
export let id = ""
|
||||
export let value = null
|
||||
export let label = ""
|
||||
export let disabled = false
|
||||
export let alignEnd = false
|
||||
export let indeterminate = false
|
||||
export let checked = false
|
||||
|
||||
let _id
|
||||
let instance = null
|
||||
let checkbox = null
|
||||
let selectedItems
|
||||
let checkProps
|
||||
|
||||
let context = _bb.getContext("BBMD:input:context")
|
||||
|
||||
onMount(() => {
|
||||
_id = generate()
|
||||
|
||||
if (!!checkbox) {
|
||||
instance = new MDCCheckbox(checkbox)
|
||||
instance.indeterminate = indeterminate
|
||||
if (context !== "list-item") {
|
||||
let fieldStore = _bb.getContext("BBMD:field-element")
|
||||
if (fieldStore) fieldStore.setInput(instance)
|
||||
}
|
||||
}
|
||||
|
||||
if (context === "checkboxgroup") {
|
||||
selectedItems = _bb.getContext("BBMD:checkbox:selectedItemsStore")
|
||||
checkProps = _bb.getContext("BBMD:checkbox:props")
|
||||
}
|
||||
})
|
||||
|
||||
let extras = null
|
||||
|
||||
if (context === "list-item") {
|
||||
extras = ["mdc-list-item__meta"]
|
||||
}
|
||||
|
||||
const cb = new ClassBuilder("checkbox")
|
||||
let modifiers = { disabled }
|
||||
let props = { modifiers, extras }
|
||||
|
||||
const blockClass = cb.build({ props })
|
||||
|
||||
function changed(e) {
|
||||
const val = e.target.checked
|
||||
checked = val
|
||||
|
||||
handleOnClick()
|
||||
if (_bb.isBound(_bb.props.checked)) {
|
||||
_bb.setStateFromBinding(_bb.props.checked, val)
|
||||
}
|
||||
}
|
||||
|
||||
function handleOnClick() {
|
||||
let item = { _id, checked, label, value }
|
||||
if (context === "checkboxgroup") {
|
||||
let idx = selectedItems.getItemIdx($selectedItems, _id)
|
||||
if (idx > -1) {
|
||||
selectedItems.removeItem(_id)
|
||||
} else {
|
||||
selectedItems.addItem(item)
|
||||
}
|
||||
}
|
||||
_bb.call(onChange, item)
|
||||
}
|
||||
|
||||
$: isChecked =
|
||||
context === "checkboxgroup"
|
||||
? $selectedItems && $selectedItems.findIndex(i => i._id === _id) > -1
|
||||
: checked
|
||||
|
||||
$: isAlignedEnd =
|
||||
context === "checkboxgroup" && !!checkProps ? checkProps.alignEnd : alignEnd
|
||||
|
||||
$: isDisabled =
|
||||
context === "checkboxgroup" && !!checkProps ? checkProps.disabled : disabled
|
||||
</script>
|
||||
|
||||
<!-- TODO: Customizing Colour and Density - What level of customization for these things does Budibase need here? -->
|
||||
|
||||
{#if context !== 'list-item'}
|
||||
<div class="bbmd-checkbox">
|
||||
<Formfield {label} {_bb} {id} alignEnd={isAlignedEnd}>
|
||||
<div bind:this={checkbox} class={blockClass}>
|
||||
<input
|
||||
type="checkbox"
|
||||
class={cb.elem`native-control`}
|
||||
{id}
|
||||
disabled={isDisabled}
|
||||
checked={isChecked}
|
||||
on:change={changed} />
|
||||
<div class={cb.elem`background`}>
|
||||
<svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
|
||||
<path
|
||||
class={cb.elem`checkmark-path`}
|
||||
fill="none"
|
||||
d="M1.73,12.91 8.1,19.28 22.79,4.59" />
|
||||
</svg>
|
||||
<div class={cb.elem`mixedmark`} />
|
||||
</div>
|
||||
<div class={cb.elem`ripple`} />
|
||||
</div>
|
||||
</Formfield>
|
||||
</div>
|
||||
{:else}
|
||||
<div bind:this={checkbox} class={blockClass}>
|
||||
<input
|
||||
type="checkbox"
|
||||
class={cb.elem`native-control`}
|
||||
{id}
|
||||
disabled={isDisabled}
|
||||
checked={isChecked}
|
||||
on:change={changed} />
|
||||
<div class={cb.elem`background`}>
|
||||
<svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
|
||||
<path
|
||||
class={cb.elem`checkmark-path`}
|
||||
fill="none"
|
||||
d="M1.73,12.91 8.1,19.28 22.79,4.59" />
|
||||
</svg>
|
||||
<div class={cb.elem`mixedmark`} />
|
||||
</div>
|
||||
<div class={cb.elem`ripple`} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.bbmd-checkbox {
|
||||
width: fit-content;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import Checkbox from "./Checkbox.svelte"
|
||||
import Label from "../Common/Label.svelte"
|
||||
import createItemsStore from "../Common/ItemStore.js"
|
||||
|
||||
let selectedItemsStore
|
||||
let checkItems
|
||||
|
||||
export let _bb
|
||||
export let label = ""
|
||||
export let orientation = "row"
|
||||
export let onChange = selectedItems => {}
|
||||
|
||||
export let disabled = false
|
||||
export let alignEnd = false
|
||||
export let value = []
|
||||
|
||||
onMount(() => {
|
||||
_bb.setContext("BBMD:input:context", "checkboxgroup")
|
||||
selectedItemsStore = createItemsStore(() => {
|
||||
value = $selectedItemsStore
|
||||
if (_bb.isBound(_bb.props.value)) {
|
||||
_bb.setStateFromBinding(_bb.props.value, value)
|
||||
}
|
||||
_bb.call(onChange, value)
|
||||
}, value)
|
||||
_bb.setContext("BBMD:checkbox:selectedItemsStore", selectedItemsStore)
|
||||
_bb.setContext("BBMD:checkbox:props", { alignEnd, disabled })
|
||||
})
|
||||
|
||||
$: checkItems && _bb.attachChildren(checkItems)
|
||||
</script>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<div class="checkbox-group__label">
|
||||
<Label text={label} bold />
|
||||
</div>
|
||||
<div bind:this={checkItems} class={`checkbox-group__boxes ${orientation}`} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.checkbox-group__boxes.row > div:not(:first-child) {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.checkbox-group > div {
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import "@material/form-field/mdc-form-field";
|
||||
@import "@material/checkbox/mdc-checkbox.scss";
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import "./_style.scss"
|
||||
export { default as Checkbox } from "./Checkbox.svelte"
|
||||
export { default as Checkboxgroup } from "./CheckboxGroup.svelte"
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
export default class ClassBuilder {
|
||||
constructor(block, defaultIgnoreList) {
|
||||
this.block = `mdc-${block}`
|
||||
this.defaultIgnoreList = defaultIgnoreList //will be ignored when building custom classes
|
||||
}
|
||||
|
||||
/*
|
||||
handles both blocks and elementss (BEM MD Notation)
|
||||
params = {elementName: string, props: {modifiers{}, customs:{}, extras: []}}
|
||||
All are optional
|
||||
*/
|
||||
build(params) {
|
||||
if (!params) return this.block //return block if nothing passed
|
||||
const { props, elementName } = params
|
||||
let base = elementName ? `${this.block}__${elementName}` : this.block
|
||||
if (!props) return base
|
||||
return this._handleProps(base, props)
|
||||
}
|
||||
|
||||
//Easily grab a simple element class
|
||||
elem(elementName) {
|
||||
return this.build({ elementName })
|
||||
}
|
||||
|
||||
//use if a different base is needed than whats defined by this.block
|
||||
debase(base, elementProps) {
|
||||
if (!elementProps) return base
|
||||
return this._handleProps(base, elementProps)
|
||||
}
|
||||
|
||||
//proxies bindProps and checks for which elementProps exist before binding
|
||||
_handleProps(base, elementProps) {
|
||||
let cls = base
|
||||
const { modifiers, customs, extras } = elementProps
|
||||
if (modifiers) cls += this._bindProps(modifiers, base)
|
||||
if (customs) cls += this._bindProps(customs, base, true)
|
||||
if (extras) cls += ` ${extras.join(" ")}`
|
||||
return cls.trim()
|
||||
}
|
||||
|
||||
/*
|
||||
Handles both modifiers and customs. Use property, value or both depending
|
||||
on whether it is passsed props for custom or modifiers
|
||||
if custom uses the following convention for scss mixins:
|
||||
bbmd-{this.block}--{property}-{value}
|
||||
bbmd-mdc-button--size-large
|
||||
*/
|
||||
_bindProps(elementProps, base, isCustom = false) {
|
||||
return Object.entries(elementProps)
|
||||
.map(([property, value]) => {
|
||||
//disregard falsy and values set by defaultIgnoreList constructor param
|
||||
if (
|
||||
!!value &&
|
||||
(!this.defaultIgnoreList || !this.defaultIgnoreList.includes(value))
|
||||
) {
|
||||
let classBase = isCustom ? `bbmd-${base}` : `${base}`
|
||||
let valueType = typeof value
|
||||
|
||||
if (valueType == "string" || valueType == "number") {
|
||||
return isCustom
|
||||
? ` ${classBase}--${this._convertCamel(property)}-${value}`
|
||||
: ` ${classBase}--${value}`
|
||||
} else if (valueType == "boolean") {
|
||||
return ` ${classBase}--${this._convertCamel(property)}`
|
||||
}
|
||||
}
|
||||
})
|
||||
.join("")
|
||||
}
|
||||
|
||||
_convertCamel(str) {
|
||||
return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<script>
|
||||
import "@material/floating-label/mdc-floating-label.scss"
|
||||
export let forInput = ""
|
||||
export let text = ""
|
||||
</script>
|
||||
|
||||
<label for={forInput} class="mdc-floating-label">{text}</label>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<script>
|
||||
import "@material/form-field/mdc-form-field.scss"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
import { fieldStore } from "./FormfieldStore.js"
|
||||
import { MDCFormField } from "@material/form-field"
|
||||
import { onMount, onDestroy } from "svelte"
|
||||
|
||||
const cb = new ClassBuilder("form-field")
|
||||
|
||||
let store
|
||||
const unsubscribe = fieldStore.subscribe(s => (store = s))
|
||||
|
||||
export let _bb
|
||||
export let id = ""
|
||||
export let label = ""
|
||||
export let alignEnd = false
|
||||
|
||||
let formField = null
|
||||
|
||||
$: modifiers = { alignEnd }
|
||||
$: props = { modifiers, extras: ["bbmd-form-field"] }
|
||||
|
||||
$: blockClasses = cb.build({ props })
|
||||
|
||||
onMount(() => {
|
||||
if (!!formField) fieldStore.set(new MDCFormField(formField))
|
||||
_bb.setContext("BBMD:field-element", fieldStore)
|
||||
})
|
||||
|
||||
onDestroy(unsubscribe)
|
||||
</script>
|
||||
|
||||
<div bind:this={formField} class={blockClasses}>
|
||||
<slot />
|
||||
<label for={id}>{label}</label>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bbmd-form-field {
|
||||
width: fit-content;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { writable } from "svelte/store"
|
||||
|
||||
function store() {
|
||||
const { set, update, subscribe } = writable({})
|
||||
|
||||
function setInput(inp) {
|
||||
update(n => {
|
||||
n.input = inp
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
set,
|
||||
setInput,
|
||||
}
|
||||
}
|
||||
|
||||
export const fieldStore = store()
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<script>
|
||||
export let icon = ""
|
||||
export let context = ""
|
||||
|
||||
let cls = !!context ? `material-icons mdc-${context}` : "material-icons"
|
||||
</script>
|
||||
|
||||
<i class={cls}>{icon}</i>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
import { writable } from "svelte/store"
|
||||
|
||||
function createItemsStore(componentOnSelect, initialState = []) {
|
||||
const { subscribe, set, update } = writable(initialState)
|
||||
|
||||
function addItem(item) {
|
||||
update(items => {
|
||||
return [...items, item]
|
||||
})
|
||||
if (componentOnSelect) {
|
||||
componentOnSelect()
|
||||
}
|
||||
}
|
||||
|
||||
function addSingleItem(item) {
|
||||
set([item])
|
||||
if (componentOnSelect) {
|
||||
componentOnSelect()
|
||||
}
|
||||
}
|
||||
|
||||
function removeItem(itemId) {
|
||||
update(items => {
|
||||
let index = getItemIdx(items, itemId)
|
||||
items.splice(index, 1)
|
||||
return items
|
||||
})
|
||||
if (componentOnSelect) {
|
||||
componentOnSelect()
|
||||
}
|
||||
}
|
||||
|
||||
function clearItems() {
|
||||
set([])
|
||||
if (componentOnSelect) {
|
||||
componentOnSelect()
|
||||
}
|
||||
}
|
||||
|
||||
function getItemIdx(items, itemId) {
|
||||
return items.findIndex(i => i && i._id === itemId)
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
addItem,
|
||||
addSingleItem,
|
||||
removeItem,
|
||||
clearItems,
|
||||
getItemIdx,
|
||||
}
|
||||
}
|
||||
|
||||
export default createItemsStore
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<script>
|
||||
export let bold = false
|
||||
export let text = ""
|
||||
</script>
|
||||
|
||||
<span class="mdc-typography" class:bold>{text}</span>
|
||||
|
||||
<style>
|
||||
.bold {
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<script>
|
||||
import "@material/notched-outline/mdc-notched-outline.scss"
|
||||
export let useLabel = true
|
||||
</script>
|
||||
|
||||
<div class="mdc-notched-outline">
|
||||
<div class="mdc-notched-outline__leading" />
|
||||
{#if useLabel}
|
||||
<div class="mdc-notched-outline__notch">
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="mdc-notched-outline__trailing" />
|
||||
</div>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import { MDCRipple } from "@material/ripple"
|
||||
|
||||
export default function ripple(
|
||||
node,
|
||||
props = { colour: "primary", unbounded: true }
|
||||
) {
|
||||
node.classList.add("mdc-ripple-surface")
|
||||
let component = new MDCRipple(node)
|
||||
component.unbounded = props.unbounded
|
||||
|
||||
if (props.colour === "secondary") {
|
||||
node.classList.remove("mdc-ripple-surface--primary")
|
||||
node.classList.add("mdc-ripple-surface--accent")
|
||||
} else {
|
||||
node.classList.add("mdc-ripple-surface--primary")
|
||||
node.classList.remove("mdc-ripple-surface--accent")
|
||||
}
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
component.destroy()
|
||||
node.classList.remove("mdc-ripple-surface")
|
||||
node.classList.remove("mdc-ripple-surface--primary")
|
||||
node.classList.remove("mdc-ripple-surface--accent")
|
||||
component = null
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { MDCDataTable } from "@material/data-table"
|
||||
import Row from "./DatatableRow.svelte"
|
||||
import Cell from "./DatatableCell.svelte"
|
||||
import { Button } from "../Button"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
|
||||
export let _bb
|
||||
export let onLoad
|
||||
|
||||
const cb = new ClassBuilder("data-table")
|
||||
_bb.setContext("BBMD:data-table:cb", cb)
|
||||
|
||||
let datatable = null
|
||||
let instance = null
|
||||
let tableElement
|
||||
let initialied = false
|
||||
|
||||
$: {
|
||||
if (tableElement && datatable && !initialied) {
|
||||
const children = _bb.attachChildren(tableElement)
|
||||
if (children.length > 0) {
|
||||
instance = new MDCDataTable(datatable)
|
||||
initialied = true
|
||||
}
|
||||
_bb.call(onLoad)
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
return () => {
|
||||
try {
|
||||
!!instance && instance.destroy()
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
instance = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div bind:this={datatable} class={cb.build()}>
|
||||
<table
|
||||
class={cb.elem`table`}
|
||||
aria-label="Material Design Datatable"
|
||||
bind:this={tableElement} />
|
||||
</div>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
|
||||
export let _bb
|
||||
|
||||
const cb = _bb.getContext("BBMD:data-table:cb")
|
||||
|
||||
let tbody
|
||||
|
||||
$: tbody && _bb.attachChildren(tbody)
|
||||
</script>
|
||||
|
||||
<tbody bind:this={tbody} class={cb.elem`content`} />
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
|
||||
export let isHeader = false
|
||||
export let numeric = false
|
||||
export let _bb
|
||||
|
||||
const cb = _bb.getContext("BBMD:data-table:cb")
|
||||
|
||||
let elementName = isHeader ? "header-cell" : "cell"
|
||||
let modifiers = { numeric }
|
||||
let props = { modifiers }
|
||||
let cellClass = cb.build({ elementName, props })
|
||||
let element
|
||||
|
||||
$: element && _bb.attachChildren(element)
|
||||
</script>
|
||||
|
||||
{#if isHeader}
|
||||
<th class={cellClass} role="columnheader" scope="col" bind:this={element}>
|
||||
<slot />
|
||||
</th>
|
||||
{:else}
|
||||
<td class={cellClass} bind:this={element}>
|
||||
<slot />
|
||||
</td>
|
||||
{/if}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
export let _bb
|
||||
|
||||
const cb = _bb.getContext("BBMD:data-table:cb")
|
||||
|
||||
let thead
|
||||
|
||||
$: thead && _bb.attachChildren(thead)
|
||||
</script>
|
||||
|
||||
<thead bind:this={thead} class="className" />
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
|
||||
export let onSelect = () => {}
|
||||
export let isHeader = false
|
||||
|
||||
export let _bb
|
||||
|
||||
let row = null
|
||||
let selected = false
|
||||
|
||||
const cb = _bb.getContext("BBMD:data-table:cb")
|
||||
|
||||
let elementName = isHeader ? "header-row" : "row"
|
||||
let modifiers = {}
|
||||
|
||||
$: modifiers = { selected }
|
||||
$: props = { modifiers }
|
||||
$: rowClass = cb.build({ elementName, props })
|
||||
$: row && _bb.attachChildren(row)
|
||||
|
||||
function rowSelected() {
|
||||
selected = !selected
|
||||
onSelect()
|
||||
}
|
||||
</script>
|
||||
|
||||
<tr bind:this={row} class={rowClass} on:click={rowSelected}>
|
||||
<slot />
|
||||
</tr>
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import "@material/data-table/mdc-data-table";
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import "./_style.scss"
|
||||
export { default as Datatable } from "./Datatable.svelte"
|
||||
export { default as DatatableCell } from "./DatatableCell.svelte"
|
||||
export { default as DatatableHead } from "./DatatableHead.svelte"
|
||||
export { default as DatatableBody } from "./DatatableBody.svelte"
|
||||
export { default as DatatableRow } from "./DatatableRow.svelte"
|
||||
|
|
@ -1,189 +0,0 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import {
|
||||
startOfMonth,
|
||||
endOfMonth,
|
||||
getDate,
|
||||
getMonth,
|
||||
getYear,
|
||||
addMonths,
|
||||
subMonths,
|
||||
format,
|
||||
} from "date-fns"
|
||||
import { MDCMenu } from "@material/menu"
|
||||
import { Textfield } from "../Textfield"
|
||||
import Icon from "../Common/Icon.svelte"
|
||||
import ripple from "../Common/Ripple.js"
|
||||
import { Body1, Body2, Caption } from "../Typography"
|
||||
import { IconButton } from "../IconButton"
|
||||
|
||||
let menu
|
||||
let instance
|
||||
let textfieldValue = ""
|
||||
|
||||
let daysArr = []
|
||||
let navDate = new Date()
|
||||
|
||||
const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
|
||||
|
||||
export let _bb
|
||||
export let date = new Date()
|
||||
export let label = ""
|
||||
export let onSelect = selectedDate => {}
|
||||
|
||||
onMount(() => {
|
||||
if (!!menu) {
|
||||
instance = new MDCMenu(menu)
|
||||
instance.open = false
|
||||
instance.setFixedPostion = true
|
||||
}
|
||||
})
|
||||
|
||||
function handleSelect(date) {
|
||||
if (_bb.isBound(_bb.props.date)) {
|
||||
_bb.setStateFromBinding(_bb.props.date, date)
|
||||
}
|
||||
_bb.call(onSelect, date)
|
||||
}
|
||||
|
||||
function selectDate(dayOfMonth) {
|
||||
let month = getMonth(navDate)
|
||||
let year = getYear(navDate)
|
||||
date = new Date(year, month, dayOfMonth)
|
||||
handleSelect(date)
|
||||
openCalendar(false)
|
||||
}
|
||||
|
||||
function dateFieldChange(value) {
|
||||
const isDate = /^\d{1,2}\/\d{1,2}\/\d{4}$/
|
||||
if (isDate.test(value)) {
|
||||
const [year, month, day] = value.split("/").reverse()
|
||||
if (month > 0 && month <= 12 && day > 0 && day <= 31) {
|
||||
date = new Date(year, month - 1, day)
|
||||
navDate = date
|
||||
openCalendar(true)
|
||||
handleSelect(date)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addMonth() {
|
||||
navDate = addMonths(navDate, 1)
|
||||
}
|
||||
|
||||
function subtractMonth() {
|
||||
navDate = subMonths(navDate, 1)
|
||||
}
|
||||
|
||||
function openCalendar(isOpen) {
|
||||
instance.open = isOpen === undefined ? !instance.open : isOpen
|
||||
}
|
||||
|
||||
$: safeDate = !!date ? date : new Date()
|
||||
$: dateMonthEnds = endOfMonth(navDate).getDate()
|
||||
$: dateMonthBegins = startOfMonth(navDate).getDay()
|
||||
$: dayStart = dateMonthBegins + 1 //1 = sunday
|
||||
$: monthAndYear = format(navDate, "MMMM y")
|
||||
$: selectedDate = format(safeDate, "dd/MM/yyyy")
|
||||
$: dayOfSelectedDate = getDate(safeDate)
|
||||
$: for (let d = 1; d <= dateMonthEnds; d++) {
|
||||
if (d === 1) {
|
||||
daysArr = [d]
|
||||
} else {
|
||||
daysArr = [...daysArr, d]
|
||||
}
|
||||
}
|
||||
$: rowRepeater =
|
||||
dateMonthBegins > 5 && daysArr[daysArr.length - 1] > 30 ? 6 : 5
|
||||
$: sameMonthAndYear =
|
||||
getMonth(safeDate) === getMonth(navDate) &&
|
||||
getYear(safeDate) === getYear(navDate)
|
||||
</script>
|
||||
|
||||
<div class="mdc-menu-surface--anchor">
|
||||
<Textfield
|
||||
{_bb}
|
||||
{label}
|
||||
onChange={dateFieldChange}
|
||||
value={selectedDate}
|
||||
trailingIcon={true}
|
||||
useIconButton={true}
|
||||
iconButtonClick={openCalendar}
|
||||
icon="calendar_today" />
|
||||
|
||||
<div bind:this={menu} class="mdc-menu mdc-menu-surface bbmd-menu">
|
||||
<div class="calendar-container">
|
||||
<div class="month-picker">
|
||||
<div>
|
||||
<IconButton icon="chevron_left" {_bb} onClick={subtractMonth} />
|
||||
</div>
|
||||
<div class="centreText">
|
||||
<Body1 text={monthAndYear} />
|
||||
</div>
|
||||
<div>
|
||||
<IconButton icon="chevron_right" {_bb} onClick={addMonth} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="week-days">
|
||||
{#each weekdayMap as day, i}
|
||||
<div class="centreText">
|
||||
<Caption text={day} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div
|
||||
class="day-picker"
|
||||
style={`grid-template-rows: repeat(${rowRepeater}, 40px)`}>
|
||||
{#each daysArr as day, i}
|
||||
<div
|
||||
use:ripple
|
||||
style={i === 0 ? `grid-column-start: ${dayStart}` : ``}
|
||||
on:click={() => selectDate(day)}
|
||||
class={`bbmd-day ${dayOfSelectedDate === day && sameMonthAndYear ? 'selected' : ''}`}>
|
||||
<Body2 text={day} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Superfluous but necessary to keep the menu instance sweet -->
|
||||
<ul class="mdc-list" role="menu" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bbmd-menu {
|
||||
width: 330px;
|
||||
height: auto;
|
||||
padding: 5px;
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.month-picker {
|
||||
display: grid;
|
||||
grid-template-columns: 40px 1fr 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.calendar-container {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
grid-template-rows: repeat(3, auto);
|
||||
grid-gap: 5px;
|
||||
}
|
||||
|
||||
.week-days {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
.day-picker {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
}
|
||||
|
||||
.centreText {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
@import "@material/ripple/mdc-ripple.scss";
|
||||
@import "@material/theme/mixins";
|
||||
|
||||
.bbmd-day {
|
||||
transition: background-color .25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
display: flex;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.selected {
|
||||
@include mdc-theme-prop(background-color, primary);
|
||||
@include mdc-theme-prop(color, on-primary);
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import "./_style.scss"
|
||||
export { default as DatePicker } from "./DatePicker.svelte"
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { fade } from "svelte/transition"
|
||||
import { MDCDialog } from "@material/dialog"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
|
||||
let dialog
|
||||
let dialogSurface
|
||||
let instance
|
||||
|
||||
export let _bb
|
||||
// TODO: may not be the best way to instantiate the dialog. Check how this will work Budibase side
|
||||
export let open = true
|
||||
|
||||
onMount(() => {
|
||||
instance = new MDCDialog(dialog)
|
||||
return () => {
|
||||
instance && instance.destroy()
|
||||
}
|
||||
})
|
||||
|
||||
$: dialogSurface && _bb.attachChildren(dialogSurface)
|
||||
|
||||
$: {
|
||||
if (open) {
|
||||
instance && instance.open()
|
||||
} else {
|
||||
instance && instance.close()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div bind:this={dialog} class="mdc-dialog">
|
||||
<div class="mdc-dialog__container">
|
||||
<div
|
||||
bind:this={dialogSurface}
|
||||
class="mdc-dialog__surface"
|
||||
role="alertdialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="my-dialog-title"
|
||||
aria-describedby="my-dialog-content" />
|
||||
</div>
|
||||
<div class="mdc-dialog__scrim" on:click={() => (open = false)} />
|
||||
</div>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
export let _bb
|
||||
let dialogActions
|
||||
|
||||
onMount(() => {
|
||||
_bb.setContext("BBMD:button:context", "mdc-dialog__button")
|
||||
})
|
||||
|
||||
$: dialogActions && _bb.attachChildren(dialogActions)
|
||||
</script>
|
||||
|
||||
<footer bind:this={dialogActions} class="mdc-dialog__actions" />
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
let dialogContent
|
||||
export let _bb
|
||||
|
||||
$: dialogContent && _bb.attachChildren(dialogContent)
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="mdc-dialog__content"
|
||||
bind:this={dialogContent}
|
||||
id="my-dialog-content" />
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<script>
|
||||
export let title = ""
|
||||
</script>
|
||||
|
||||
<h2 class="mdc-dialog__title" id="my-dialog-title">{title}</h2>
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import "@material/dialog/mdc-dialog.scss"
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import "./_style.scss"
|
||||
export { default as Dialog } from "./Dialog.svelte"
|
||||
export { default as DialogActions } from "./DialogActions.svelte"
|
||||
export { default as DialogContent } from "./DialogContent.svelte"
|
||||
export { default as DialogHeader } from "./DialogHeader.svelte"
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import ripple from "../Common/Ripple.js"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
|
||||
const cb = new ClassBuilder("icon-button")
|
||||
|
||||
let on = false
|
||||
|
||||
export let _bb
|
||||
export let context = ""
|
||||
export let onClick = () => {}
|
||||
export let disabled = false
|
||||
export let href = ""
|
||||
export let icon = ""
|
||||
export let onIcon = "" //on state icon for toggle button
|
||||
export let size = "medium"
|
||||
|
||||
onMount(() => {
|
||||
let ctx = !!_bb ? _bb.getContext("BBMD:icon-button:context") : ""
|
||||
//It isn't possible to use context within nested components as they do not have their own _bb instance (has to be passed down from parent component). This allows context to be passed as props
|
||||
if (!context && !!ctx) {
|
||||
context = ctx
|
||||
}
|
||||
})
|
||||
|
||||
function onButtonClick() {
|
||||
open = !open
|
||||
_bb.call(onClick)
|
||||
}
|
||||
|
||||
$: isToggleButton = !!icon && !!onIcon
|
||||
$: useLinkButton = !!href
|
||||
|
||||
$: customs = { size }
|
||||
$: props = { customs, extras: ["material-icons", context] }
|
||||
$: iconBtnClass = cb.build({ props })
|
||||
</script>
|
||||
|
||||
{#if useLinkButton}
|
||||
<a
|
||||
on:click={onButtonClick}
|
||||
class={iconBtnClass}
|
||||
{href}
|
||||
{disabled}
|
||||
role="button"
|
||||
tabindex="0">
|
||||
{#if isToggleButton}
|
||||
<i
|
||||
use:ripple
|
||||
class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
|
||||
{onIcon}
|
||||
</i>
|
||||
<i use:ripple class="material-icons mdc-icon-button__icon">{icon}</i>
|
||||
{:else}{icon}{/if}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
on:click={onButtonClick}
|
||||
class={iconBtnClass}
|
||||
{disabled}
|
||||
role="button"
|
||||
aria-label="Add to favorites"
|
||||
aria-pressed="false"
|
||||
tabindex="0">
|
||||
{#if isToggleButton}
|
||||
<i use:ripple class="material-icons mdc-icon-button__icon">{icon}</i>
|
||||
<i
|
||||
use:ripple
|
||||
class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
|
||||
{onIcon}
|
||||
</i>
|
||||
{:else}{icon}{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
@import "@material/icon-button/mdc-icon-button";
|
||||
|
||||
.mdc-icon-button {
|
||||
|
||||
&.bbmd-mdc-icon-button--size-large {
|
||||
@include mdc-icon-button-icon-size(24px);
|
||||
}
|
||||
|
||||
&.bbmd-mdc-icon-button--size-medium {
|
||||
@include mdc-icon-button-icon-size(20px);
|
||||
}
|
||||
|
||||
&.bbmd-mdc-icon-button--size-small {
|
||||
@include mdc-icon-button-icon-size(16px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import "./_style.scss"
|
||||
export { default as IconButton } from "./IconButton.svelte"
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<script>
|
||||
import { onMount, getContext, setContext } from "svelte"
|
||||
import { MDCList } from "@material/list"
|
||||
import createItemsStore from "../Common/ItemStore.js"
|
||||
import { MDCRipple } from "@material/ripple"
|
||||
import ListItem from "./ListItem.svelte"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
|
||||
export let _bb
|
||||
const cb = new ClassBuilder("list", ["one-line"])
|
||||
|
||||
let list = null
|
||||
let instance = null
|
||||
|
||||
export let onSelect = selectedItems => {}
|
||||
|
||||
export let singleSelection = false
|
||||
export let variant = "one-line"
|
||||
export let inputElement = null
|
||||
export let value = []
|
||||
|
||||
let selectedItemsStore
|
||||
|
||||
let role = "listbox"
|
||||
|
||||
onMount(() => {
|
||||
let ctx = getContext("BBMD:list:context")
|
||||
|
||||
selectedItemsStore = createItemsStore(() => {
|
||||
value = $selectedItemsStore
|
||||
if (_bb.isBound(_bb.props.value)) {
|
||||
_bb.setStateFromBinding(_bb.props.value, value)
|
||||
}
|
||||
_bb.call(onSelect, value)
|
||||
}, value)
|
||||
_bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
|
||||
|
||||
_bb.setContext("BBMD:list:props", {
|
||||
inputElement,
|
||||
variant,
|
||||
singleSelection,
|
||||
})
|
||||
|
||||
if (!!list) {
|
||||
if (!inputElement) {
|
||||
instance = new MDCList(list)
|
||||
instance.singleSelection = singleSelection
|
||||
instance.listElements.map(element => new MDCRipple(element))
|
||||
}
|
||||
}
|
||||
|
||||
let context = getContext("BBMD:list:context")
|
||||
if (context === "menu") {
|
||||
role = "menu"
|
||||
}
|
||||
|
||||
return () => {
|
||||
instance && instance.destroy()
|
||||
instance = null
|
||||
}
|
||||
})
|
||||
|
||||
$: list && _bb.attachChildren(list)
|
||||
|
||||
$: modifiers = { variant }
|
||||
$: props = { modifiers }
|
||||
$: listClass = cb.build({ props })
|
||||
</script>
|
||||
|
||||
<ul bind:this={list} class={listClass} {role} />
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
<script>
|
||||
import { onMount, getContext } from "svelte"
|
||||
import { Radiobutton } from "../Radiobutton"
|
||||
import { Checkbox } from "../Checkbox"
|
||||
import Icon from "../Common/Icon.svelte"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
import { generate } from "shortid"
|
||||
|
||||
const cb = new ClassBuilder("list-item")
|
||||
|
||||
let _id
|
||||
let listProps = null
|
||||
|
||||
let selectedItems
|
||||
|
||||
export let _bb
|
||||
|
||||
export let value = ""
|
||||
export let text = ""
|
||||
export let secondaryText = ""
|
||||
|
||||
export let leadingIcon = ""
|
||||
export let trailingIcon = ""
|
||||
export let selected = false
|
||||
export let disabled = false
|
||||
export let dividerAfter = false
|
||||
|
||||
let role = "option"
|
||||
|
||||
const itemData = () => ({
|
||||
_id,
|
||||
value,
|
||||
text,
|
||||
secondaryText,
|
||||
selected,
|
||||
disabled,
|
||||
})
|
||||
|
||||
onMount(() => {
|
||||
_id = generate()
|
||||
|
||||
selectedItems = _bb.getContext("BBMD:list:selectItemStore")
|
||||
|
||||
listProps = _bb.getContext("BBMD:list:props")
|
||||
|
||||
let context = _bb.getContext("BBMD:list:context")
|
||||
const _addItem = _bb.getContext("BBMD:list:addItem")
|
||||
|
||||
if (context === "menu") {
|
||||
role = "menuitem"
|
||||
}
|
||||
|
||||
// TODO: Causing first element to be automatically selected. Commenting for now.
|
||||
// if (_addItem) {
|
||||
// _addItem(itemData())
|
||||
// }
|
||||
})
|
||||
|
||||
function handleChange() {
|
||||
let item = itemData()
|
||||
if (!disabled) {
|
||||
if (
|
||||
listProps.singleSelection ||
|
||||
listProps.inputElement === "radiobutton"
|
||||
) {
|
||||
selectedItems.addSingleItem(item)
|
||||
} else {
|
||||
let idx = selectedItems.getItemIdx($selectedItems, _id)
|
||||
if (idx > -1) {
|
||||
selectedItems.removeItem(_id)
|
||||
} else {
|
||||
selectedItems.addItem(item)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$: if (listProps && !!listProps.inputElement) {
|
||||
_bb.setContext("BBMD:input:context", "list-item")
|
||||
}
|
||||
|
||||
$: isSelected =
|
||||
($selectedItems && selectedItems.getItemIdx($selectedItems, _id) > -1) ||
|
||||
selected
|
||||
|
||||
$: modifiers = {
|
||||
selected: isSelected && (!listProps || !listProps.inputElement),
|
||||
disabled,
|
||||
}
|
||||
$: props = { modifiers }
|
||||
$: listItemClass = cb.build({ props })
|
||||
|
||||
$: useTwoLine =
|
||||
listProps && listProps.variant === "two-line" && !!secondaryText
|
||||
|
||||
$: hasInputElement = listProps && listProps.inputElement !== "None"
|
||||
</script>
|
||||
|
||||
<li
|
||||
class={listItemClass}
|
||||
role="option"
|
||||
tabindex="0"
|
||||
on:click={handleChange}
|
||||
data-value={value || text}
|
||||
aria-selected={isSelected}>
|
||||
{#if leadingIcon}
|
||||
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">
|
||||
{leadingIcon}
|
||||
</span>
|
||||
{/if}
|
||||
<span class={cb.elem`text`}>
|
||||
{#if useTwoLine}
|
||||
<span class={cb.elem`primary-text`}>{text}</span>
|
||||
<span class={cb.elem`secondary-text`}>{secondaryText}</span>
|
||||
{:else}{text}{/if}
|
||||
</span>
|
||||
|
||||
{#if hasInputElement}
|
||||
{#if listProps.inputElement === 'Radiobutton'}
|
||||
<Radiobutton checked={isSelected} {disabled} {_bb} />
|
||||
{:else if listProps.inputElement === 'Checkbox'}
|
||||
<Checkbox checked={isSelected} {disabled} {_bb} />
|
||||
{/if}
|
||||
{:else if !!trailingIcon}
|
||||
<Icon context="list-item__meta" icon={trailingIcon} />
|
||||
{/if}
|
||||
</li>
|
||||
{#if dividerAfter}
|
||||
<li class="mdc-list-divider" role="separator" />
|
||||
{/if}
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import "@material/list/mdc-list.scss";
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import "./_style.scss"
|
||||
export { default as List } from "./List.svelte"
|
||||
export { default as ListItem } from "./ListItem.svelte"
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
<script>
|
||||
import { List } from "../List"
|
||||
import { MDCMenu } from "@material/menu"
|
||||
import { onMount, setContext } from "svelte"
|
||||
import createItemsStore from "../Common/ItemStore.js"
|
||||
|
||||
export let onSelect = selectedItems => {}
|
||||
|
||||
export let width = "400px"
|
||||
export let open = true
|
||||
export let useFixedPosition = false
|
||||
export let useAbsolutePosition = false
|
||||
export let absolutePositionX = 0
|
||||
export let absolutePositionY = 0
|
||||
|
||||
export let _bb
|
||||
|
||||
let menu = null
|
||||
let menuList = null
|
||||
let instance = null
|
||||
let selectedItemsStore
|
||||
|
||||
onMount(() => {
|
||||
_bb.setContext("BBMD:list:context", "menu")
|
||||
_bb.setContext("BBMD:list:props", { singleSelection: true })
|
||||
|
||||
selectedItemsStore = createItemsStore(() => {
|
||||
let value =
|
||||
$selectedItemsStore && $selectedItemsStore.length > 0
|
||||
? $selectedItemsStore[0]
|
||||
: ""
|
||||
|
||||
_bb.call(onSelect, value)
|
||||
})
|
||||
_bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
|
||||
|
||||
if (!!menu) {
|
||||
instance = new MDCMenu(menu)
|
||||
instance.open = open
|
||||
if (useFixedPosition) {
|
||||
instance.setFixedPosition(true)
|
||||
} else if (useAbsolutePosition) {
|
||||
instance.setAbsolutePosition(absolutePositionX, absolutePositionY)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
$: menuList && _bb.attachChildren(menuList)
|
||||
</script>
|
||||
|
||||
{#if useFixedPosition || useAbsolutePosition}
|
||||
<div
|
||||
bind:this={menu}
|
||||
class="mdc-menu mdc-menu-surface"
|
||||
style={`width: ${width}`}>
|
||||
<ul bind:this={menuList} class="mdc-list" role="menu" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mdc-menu-surface--anchor">
|
||||
<!--TODO: Will automatically anchor to slotted element. Not sure how this would be achieved with Budibase though -->
|
||||
<slot />
|
||||
<div
|
||||
bind:this={menu}
|
||||
class="mdc-menu mdc-menu-surface"
|
||||
style={`width: ${width}`}>
|
||||
<ul bind:this={menuList} class="mdc-list" role="menu" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@import "@material/list/mdc-list.scss";
|
||||
@import "@material/menu-surface/mdc-menu-surface.scss";
|
||||
@import "@material/menu/mdc-menu.scss";
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import "./_styles.scss"
|
||||
export { default as Menu } from "./Menu.svelte"
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
<script>
|
||||
import { onMount, onDestroy } from "svelte"
|
||||
import Formfield from "../Common/Formfield.svelte"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
import { MDCRadio } from "@material/radio"
|
||||
import { generate } from "shortid"
|
||||
|
||||
export let onClick = item => {}
|
||||
export let _bb
|
||||
|
||||
export let id = ""
|
||||
export let label = ""
|
||||
export let value = ""
|
||||
export let name = "radios"
|
||||
export let checked = false
|
||||
export let disabled = false
|
||||
export let alignEnd = false
|
||||
|
||||
let _id
|
||||
let instance = null
|
||||
let radiobtn = null
|
||||
let selectedItems
|
||||
let radioProps
|
||||
|
||||
let context = _bb.getContext("BBMD:input:context")
|
||||
|
||||
onMount(() => {
|
||||
_id = generate()
|
||||
|
||||
if (!!radiobtn) {
|
||||
instance = new MDCRadio(radiobtn)
|
||||
if (context !== "list-item") {
|
||||
let fieldStore = _bb.getContext("BBMD:field-element")
|
||||
fieldStore.setInput(instance)
|
||||
}
|
||||
}
|
||||
if (context === "radiobuttongroup") {
|
||||
selectedItems = _bb.getContext("BBMD:radiobutton:selectedItemsStore")
|
||||
radioProps = _bb.getContext("BBMD:radiobutton:props")
|
||||
name = radioProps.name
|
||||
}
|
||||
})
|
||||
|
||||
function handleOnClick() {
|
||||
let item = { _id, label, value }
|
||||
if (context === "radiobuttongroup") {
|
||||
selectedItems.addSingleItem(item)
|
||||
} else {
|
||||
_bb.call(onClick, item)
|
||||
}
|
||||
}
|
||||
|
||||
let extras = null
|
||||
|
||||
if (context === "list-item") {
|
||||
extras = ["mdc-list-item__meta"]
|
||||
}
|
||||
|
||||
const cb = new ClassBuilder("radio")
|
||||
|
||||
$: isChecked =
|
||||
context === "radiobuttongroup"
|
||||
? $selectedItems && $selectedItems.findIndex(i => i._id === _id) > -1
|
||||
: checked
|
||||
|
||||
$: isAlignedEnd =
|
||||
context === "radiobuttongroup" && !!radioProps
|
||||
? radioProps.alignEnd
|
||||
: alignEnd
|
||||
|
||||
$: isDisabled =
|
||||
context === "radiobuttongroup" && !!radioProps
|
||||
? radioProps.disabled
|
||||
: disabled
|
||||
|
||||
$: modifiers = { disabled: isDisabled }
|
||||
$: props = { modifiers, extras }
|
||||
|
||||
$: blockClass = cb.build({ props })
|
||||
</script>
|
||||
|
||||
{#if context !== 'list-item'}
|
||||
<Formfield {id} {_bb} {label} alignEnd={isAlignedEnd}>
|
||||
<div class={blockClass}>
|
||||
<input
|
||||
{id}
|
||||
class={cb.elem`native-control`}
|
||||
type="radio"
|
||||
{name}
|
||||
checked={isChecked}
|
||||
disabled={isDisabled}
|
||||
on:click={handleOnClick} />
|
||||
<div class={cb.elem`background`}>
|
||||
<div class={cb.elem`outer-circle`} />
|
||||
<div class={cb.elem`inner-circle`} />
|
||||
</div>
|
||||
<div class={cb.elem`ripple`} />
|
||||
</div>
|
||||
</Formfield>
|
||||
{:else}
|
||||
<div class={blockClass}>
|
||||
<input
|
||||
{id}
|
||||
class={cb.elem`native-control`}
|
||||
type="radio"
|
||||
{name}
|
||||
checked={isChecked}
|
||||
disabled={isDisabled}
|
||||
on:click={handleOnClick} />
|
||||
<div class={cb.elem`background`}>
|
||||
<div class={cb.elem`outer-circle`} />
|
||||
<div class={cb.elem`inner-circle`} />
|
||||
</div>
|
||||
<div class={cb.elem`ripple`} />
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import createItemStore from "../Common/ItemStore.js"
|
||||
import Radiobutton from "./Radiobutton.svelte"
|
||||
import Label from "../Common/Label.svelte"
|
||||
|
||||
export let onChange = selected => {}
|
||||
|
||||
export let _bb
|
||||
export let name = "radio-group"
|
||||
export let label = ""
|
||||
export let orientation = "row"
|
||||
export let fullwidth = false
|
||||
export let alignEnd = false
|
||||
export let disabled = false
|
||||
export let value = []
|
||||
|
||||
$: safeValue = Array.isArray(value) ? value : [value]
|
||||
|
||||
let selectedItemsStore
|
||||
let selected = null
|
||||
let radioItems
|
||||
|
||||
onMount(() => {
|
||||
_bb.setContext("BBMD:input:context", "radiobuttongroup")
|
||||
selectedItemsStore = createItemStore(() => {
|
||||
value = $selectedItemsStore[0]
|
||||
if (_bb.isBound(_bb.props.value)) {
|
||||
_bb.setStateFromBinding(_bb.props.value, value)
|
||||
}
|
||||
_bb.call(onChange, value)
|
||||
}, safeValue)
|
||||
_bb.setContext("BBMD:radiobutton:props", { name, disabled, alignEnd })
|
||||
_bb.setContext("BBMD:radiobutton:selectedItemsStore", selectedItemsStore)
|
||||
})
|
||||
|
||||
$: alignRight = orientation === "column" && alignEnd
|
||||
$: radioItems && _bb.attachChildren(radioItems)
|
||||
</script>
|
||||
|
||||
<div class="radiobutton-group">
|
||||
<div class="radiobutton-group__label">
|
||||
<Label text={label} bold />
|
||||
</div>
|
||||
<div class={`radiobutton-group__radios ${orientation}`} class:alignRight>
|
||||
<div bind:this={radioItems} class:fullwidth />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.radiobutton-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.radiobutton-group__radios.row > div:not(:first-child) {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.radiobutton-group > div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.alignRight {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
|
||||
.fullwidth {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import "@material/form-field/mdc-form-field";
|
||||
@import "@material/radio/mdc-radio.scss";
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import "./_style.scss"
|
||||
export { default as Radiobutton } from "./Radiobutton.svelte"
|
||||
export { default as Radiobuttongroup } from "./RadiobuttonGroup.svelte"
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<script>
|
||||
import "@material/select/helper-text/mdc-select-helper-text.scss"
|
||||
import { onMount } from "svelte"
|
||||
import { MDCSelectHelperText } from "@material/select/helper-text"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
|
||||
const cb = new ClassBuilder("select-helper-text")
|
||||
|
||||
let helperText
|
||||
let instance
|
||||
|
||||
export let id = ""
|
||||
export let text = ""
|
||||
export let persistent = false
|
||||
|
||||
onMount(() => {
|
||||
if (!!helperText) {
|
||||
instance = new MDCSelectHelperText(helperText)
|
||||
return () => {
|
||||
instance && instance.destroy()
|
||||
instance = null
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
$: modifiers = { persistent }
|
||||
$: props = { modifiers }
|
||||
$: helperClass = cb.build({ props })
|
||||
</script>
|
||||
|
||||
<p bind:this={helperText} {id} class={helperClass} aria-hidden="true">{text}</p>
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { MDCSelect } from "@material/select"
|
||||
import { generate } from "shortid"
|
||||
|
||||
import HelperText from "./HelperText.svelte"
|
||||
import NotchedOutline from "../Common/NotchedOutline.svelte"
|
||||
import FloatingLabel from "../Common/FloatingLabel.svelte"
|
||||
import createItemsStore from "../Common/ItemStore.js"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
|
||||
const cb = new ClassBuilder("select", ["filled"])
|
||||
|
||||
let selectedItemsStore
|
||||
|
||||
let select
|
||||
let selectList
|
||||
let instance
|
||||
let _helperId = ""
|
||||
// let listItems = []
|
||||
|
||||
export let _bb
|
||||
export let onSelect = items => {}
|
||||
export let width = "400px"
|
||||
export let variant = "filled"
|
||||
export let disabled = false
|
||||
export let required = false
|
||||
export let label = ""
|
||||
export let helperText = ""
|
||||
export let persistent = false
|
||||
export let value = ""
|
||||
|
||||
$: safeValue = Array.isArray(value) ? value : [value]
|
||||
|
||||
onMount(() => {
|
||||
_bb.setContext("BBMD:list:props", { singleSelection: true })
|
||||
|
||||
//May not be necessary as state binds from value below. Commenting for now.
|
||||
// _bb.setContext("BBMD:list:addItem", i => (listItems = [...listItems, i]))
|
||||
|
||||
selectedItemsStore = createItemsStore(() => {
|
||||
const v =
|
||||
$selectedItemsStore && $selectedItemsStore.length > 0
|
||||
? $selectedItemsStore[0].value
|
||||
: ""
|
||||
|
||||
value = v
|
||||
_bb.setStateFromBinding(_bb.props.value, v)
|
||||
_bb.call(onSelect, v)
|
||||
}, safeValue)
|
||||
|
||||
_bb.setContext("BBMD:list:selectItemStore", selectedItemsStore)
|
||||
|
||||
_helperId = generate()
|
||||
|
||||
if (!!select) {
|
||||
instance = new MDCSelect(select)
|
||||
return () => {
|
||||
instance && instance.destroy()
|
||||
instance = null
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
$: useNotchedOutline = variant === "outlined"
|
||||
$: selectList && _bb.attachChildren(selectList)
|
||||
|
||||
$: modifiers = { variant, disabled, required, noLabel: !label }
|
||||
$: props = { modifiers }
|
||||
$: selectClass = cb.build({ props })
|
||||
// $: if (value !== undefined && instance && listItems.length > 0) {
|
||||
// instance.selectedIndex = listItems.findIndex(i => i.value === value)
|
||||
// }
|
||||
</script>
|
||||
|
||||
<div bind:this={select} id={_helperId} class={selectClass}>
|
||||
<div class="mdc-select__anchor" style={`width: ${width}`}>
|
||||
<i class="mdc-select__dropdown-icon" />
|
||||
<div
|
||||
id={_helperId}
|
||||
class="mdc-select__selected-text"
|
||||
aria-required={required}
|
||||
aria-controls={_helperId}
|
||||
aria-describedby={_helperId} />
|
||||
|
||||
{#if useNotchedOutline}
|
||||
<NotchedOutline>
|
||||
<FloatingLabel text={label} />
|
||||
</NotchedOutline>
|
||||
{:else}
|
||||
<FloatingLabel text={label} />
|
||||
<div class="mdc-line-ripple" />
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mdc-select__menu mdc-menu mdc-menu-surface"
|
||||
role="listbox"
|
||||
style={`width: ${width}`}>
|
||||
|
||||
<ul bind:this={selectList} class="mdc-list" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<HelperText id={_helperId} text={helperText} {persistent} />
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@use "@material/list/mdc-list";
|
||||
@use "@material/menu-surface/mdc-menu-surface";
|
||||
@use "@material/menu/mdc-menu";
|
||||
@use "@material/select/mdc-select";
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import "./_style.scss"
|
||||
export { default as HelperText } from "./HelperText.svelte"
|
||||
export { default as Select } from "./Select.svelte"
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<script>
|
||||
import { MDCSlider } from "@material/slider"
|
||||
import { onMount } from "svelte"
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
|
||||
const cb = new ClassBuilder("slider", ["continuous"])
|
||||
|
||||
let slider
|
||||
let instance
|
||||
|
||||
export let _bb
|
||||
export let onChange = value => {}
|
||||
export let variant = "continuous"
|
||||
export let showTicks = false
|
||||
export let min = 0
|
||||
export let max = 100
|
||||
export let value = 1
|
||||
export let step = 1
|
||||
export let label = ""
|
||||
export let disabled = false
|
||||
|
||||
function handleChange(val) {
|
||||
value = val
|
||||
if (_bb.isBound(_bb.props.value)) {
|
||||
_bb.setStateFromBinding(_bb.props.value, value)
|
||||
}
|
||||
_bb.call(onChange, val)
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
instance = new MDCSlider(slider)
|
||||
return () => instance.destroy()
|
||||
})
|
||||
|
||||
$: {
|
||||
if (instance) {
|
||||
instance.value = value
|
||||
}
|
||||
}
|
||||
|
||||
$: isDiscrete = variant === "discrete"
|
||||
$: displayMarkers = isDiscrete && showTicks
|
||||
|
||||
$: modifiers = { variant, displayMarkers }
|
||||
$: props = { modifiers }
|
||||
$: sliderCls = cb.build({ props })
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={slider}
|
||||
class={sliderCls}
|
||||
tabindex="0"
|
||||
role="slider"
|
||||
data-step={step}
|
||||
aria-valuemin={min}
|
||||
aria-valuemax={max}
|
||||
aria-valuenow={value}
|
||||
aria-label={label}
|
||||
aria-disabled={disabled}
|
||||
on:MDCSlider:input={e => handleChange(e.detail.value)}
|
||||
on:MDCSlider:change={e => handleChange(e.detail.value)}>
|
||||
<div class="mdc-slider__track-container">
|
||||
<div class="mdc-slider__track" />
|
||||
{#if displayMarkers}
|
||||
<div class="mdc-slider__track-marker-container" />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="mdc-slider__thumb-container">
|
||||
<div class="mdc-slider__pin">
|
||||
<span class="mdc-slider__pin-value-marker" />
|
||||
</div>
|
||||
<svg class="mdc-slider__thumb" width="21" height="21">
|
||||
<circle cx="10.5" cy="10.5" r="7.875" />
|
||||
</svg>
|
||||
<div class="mdc-slider__focus-ring" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import "@material/slider/mdc-slider.scss"
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import "./_style.scss"
|
||||
export { default as Slider } from "./Slider.svelte"
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<script>
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
import Formfield from "../Common/Formfield.svelte"
|
||||
import Label from "../Common/Label.svelte"
|
||||
export let onChange = checked => {}
|
||||
|
||||
export let _bb
|
||||
export let alignEnd = true
|
||||
export let disabled = false
|
||||
export let checked = false
|
||||
export let label = ""
|
||||
export let id = "my-switch-component"
|
||||
|
||||
const cb = new ClassBuilder("switch")
|
||||
|
||||
function handleChange() {
|
||||
checked = !checked
|
||||
if (_bb.isBound(_bb.props.checked)) {
|
||||
_bb.setStateFromBinding(_bb.props.checked, checked)
|
||||
}
|
||||
_bb.call(onChange, checked)
|
||||
}
|
||||
|
||||
$: modifiers = { disabled, checked }
|
||||
$: props = { modifiers }
|
||||
$: switchCls = cb.build({ props })
|
||||
</script>
|
||||
|
||||
<Formfield {_bb} {label} {alignEnd}>
|
||||
<div class={switchCls} on:change={handleChange} style="margin: 0px 5px">
|
||||
<div class="mdc-switch__track" />
|
||||
<div class="mdc-switch__thumb-underlay">
|
||||
<div class="mdc-switch__thumb" />
|
||||
<input
|
||||
type="checkbox"
|
||||
{id}
|
||||
class="mdc-switch__native-control"
|
||||
role="switch"
|
||||
aria-checked={checked}
|
||||
{disabled}
|
||||
{checked} />
|
||||
</div>
|
||||
</div>
|
||||
</Formfield>
|
||||
|
|
@ -1 +0,0 @@
|
|||
@import "@material/switch/mdc-switch.scss";
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import "./_style.scss"
|
||||
export { default as Switch } from "./Switch.svelte"
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<script>
|
||||
import createApp from "./createApp"
|
||||
import { props } from "./props"
|
||||
let _bb
|
||||
const {
|
||||
H1,
|
||||
Overline,
|
||||
Button,
|
||||
BodyBoundToStore,
|
||||
Textfield,
|
||||
Checkbox,
|
||||
Checkboxgroup,
|
||||
Radiobutton,
|
||||
Radiobuttongroup,
|
||||
Datatable,
|
||||
CustomersIndexTable,
|
||||
Icon,
|
||||
List,
|
||||
Select,
|
||||
DatePicker,
|
||||
IconButton,
|
||||
Card,
|
||||
Dialog,
|
||||
Switch,
|
||||
Slider,
|
||||
} = props
|
||||
|
||||
let currentComponent
|
||||
let _appPromise
|
||||
$: {
|
||||
if (currentComponent) {
|
||||
const _appPromise = createApp()
|
||||
const page = {
|
||||
props: {
|
||||
_component: "testcomponents/rootComponent",
|
||||
_children: [
|
||||
Button,
|
||||
Textfield,
|
||||
Checkboxgroup,
|
||||
Radiobutton,
|
||||
Radiobuttongroup,
|
||||
Datatable,
|
||||
CustomersIndexTable,
|
||||
Icon,
|
||||
List,
|
||||
Select,
|
||||
DatePicker,
|
||||
IconButton,
|
||||
Card,
|
||||
Switch,
|
||||
Slider,
|
||||
],
|
||||
},
|
||||
}
|
||||
_appPromise.then(initialise => {
|
||||
initialise(page, currentComponent, "")
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await _appPromise}
|
||||
loading
|
||||
{:then _bb}
|
||||
<div id="current_component" bind:this={currentComponent} />
|
||||
{/await}
|
||||
|
||||
<style>
|
||||
#current_component {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { createApp } from "@budibase/client/src/createApp"
|
||||
import components from "./testComponents"
|
||||
import packageJson from "../../package.json"
|
||||
import { rootComponent } from "./rootComponent"
|
||||
import * as standardcomponents from "@budibase/standard-components/src/index"
|
||||
|
||||
export default async () => {
|
||||
delete components._lib
|
||||
const componentLibraries = {}
|
||||
componentLibraries[packageJson.name] = components
|
||||
componentLibraries["testcomponents"] = {
|
||||
rootComponent: rootComponent(window),
|
||||
}
|
||||
componentLibraries["@budibase/standard-components"] = standardcomponents
|
||||
const appDef = { hierarchy: {}, actions: {} }
|
||||
const user = { name: "yeo", permissions: [] }
|
||||
const { initialisePage } = createApp(componentLibraries, {}, appDef, user, {})
|
||||
return initialisePage
|
||||
}
|
||||
|
|
@ -1,320 +0,0 @@
|
|||
import indexDatatable from "../Templates/indexDatatable"
|
||||
|
||||
const templateOptions = {
|
||||
indexes: [
|
||||
{
|
||||
name: "customers",
|
||||
nodeKey: () => "/customers",
|
||||
},
|
||||
],
|
||||
helpers: {
|
||||
indexSchema: index => {
|
||||
const field = name => ({ name })
|
||||
if (index.name === "customers")
|
||||
return [
|
||||
field("id"),
|
||||
field("surname"),
|
||||
field("forname"),
|
||||
field("address"),
|
||||
]
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const props = {
|
||||
H1: {
|
||||
_component: "@budibase/materialdesign-components/H1",
|
||||
_children: [],
|
||||
text: "Im a big header",
|
||||
},
|
||||
Overline: {
|
||||
_component: "@budibase/materialdesign-components/Overline",
|
||||
_children: [],
|
||||
text: "Im a wee overline",
|
||||
},
|
||||
Button: {
|
||||
_component: "@budibase/materialdesign-components/Button",
|
||||
_children: [],
|
||||
variant: "text",
|
||||
colour: "secondary",
|
||||
size: "large",
|
||||
href: "",
|
||||
icon: "alarm_on",
|
||||
trailingIcon: true,
|
||||
fullwidth: false,
|
||||
text: "I am button",
|
||||
disabled: false,
|
||||
onClick: [
|
||||
{
|
||||
"##eventHandlerType": "Set State",
|
||||
parameters: {
|
||||
path: "surname",
|
||||
value: "hi",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
Icon: {
|
||||
_component: "@budibase/materialdesign-components/Icon",
|
||||
_children: [],
|
||||
icon: "",
|
||||
},
|
||||
Textfield: {
|
||||
_component: "@budibase/materialdesign-components/Textfield",
|
||||
_children: [],
|
||||
label: "First",
|
||||
colour: "secondary",
|
||||
icon: "alarm_on",
|
||||
trailingIcon: true,
|
||||
maxLength: 500,
|
||||
helperText: "Add Surname",
|
||||
value: "store.surname",
|
||||
},
|
||||
BodyBoundToStore: {
|
||||
_component: "@budibase/materialdesign-components/Body1",
|
||||
text: "store.surname",
|
||||
},
|
||||
Checkbox: {
|
||||
_component: "@budibase/materialdesign-components/Checkbox",
|
||||
_children: [],
|
||||
id: "test-check",
|
||||
alignEnd: true,
|
||||
label: "Check Yo Self",
|
||||
onChange: item => console.log(item),
|
||||
},
|
||||
Checkboxgroup: {
|
||||
_component: "@budibase/materialdesign-components/Checkboxgroup",
|
||||
label: "Whats your favourite?",
|
||||
alignEnd: true,
|
||||
onChange: selectedItems => console.log(selectedItems),
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Checkbox",
|
||||
_children: [],
|
||||
label: "Currys",
|
||||
indeterminate: true,
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Checkbox",
|
||||
_children: [],
|
||||
label: "Chips",
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Checkbox",
|
||||
_children: [],
|
||||
label: "Pasties",
|
||||
},
|
||||
],
|
||||
},
|
||||
Radiobutton: {
|
||||
_component: "@budibase/materialdesign-components/Radiobutton",
|
||||
_children: [],
|
||||
label: "Hi radio",
|
||||
alignEnd: true,
|
||||
onClick: item => console.log(item),
|
||||
},
|
||||
Radiobuttongroup: {
|
||||
_component: "@budibase/materialdesign-components/Radiobuttongroup",
|
||||
label: "Preferred method of contact: ",
|
||||
orientation: "column",
|
||||
alignEnd: true,
|
||||
onChange: selected => console.log("Radiobutton Group", selected),
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Radiobutton",
|
||||
_children: [],
|
||||
label: "Email",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Radiobutton",
|
||||
_children: [],
|
||||
label: "Phone",
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Radiobutton",
|
||||
_children: [],
|
||||
label: "Social Media",
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
Datatable: {
|
||||
_component: "@budibase/materialdesign-components/Datatable",
|
||||
_children: [],
|
||||
},
|
||||
|
||||
CustomersIndexTable: indexDatatable(templateOptions)[0].props,
|
||||
List: {
|
||||
_component: "@budibase/materialdesign-components/List",
|
||||
variant: "two-line",
|
||||
singleSelection: false,
|
||||
onSelect: selected => console.log("LIST SELECT", selected),
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/ListItem",
|
||||
_children: [],
|
||||
text: "Curry",
|
||||
secondaryText: "Chicken or Beef",
|
||||
value: 0,
|
||||
divider: true,
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/ListItem",
|
||||
_children: [],
|
||||
text: "Pastie",
|
||||
secondaryText: "Bap with Mayo",
|
||||
value: 1,
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/ListItem",
|
||||
_children: [],
|
||||
text: "Fish",
|
||||
secondaryText: "Salmon or Cod",
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
Select: {
|
||||
_component: "@budibase/materialdesign-components/Select",
|
||||
label: "Choose a Milkshake",
|
||||
helperText: "Choose a flavour",
|
||||
persistent: true,
|
||||
value: "1",
|
||||
onSelect: selectedItem => console.log("SELECT ITEM", selectedItem),
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/ListItem",
|
||||
_children: [],
|
||||
text: "Orange",
|
||||
value: "0",
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/ListItem",
|
||||
_children: [],
|
||||
text: "Apple",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/ListItem",
|
||||
_children: [],
|
||||
text: "Berry",
|
||||
value: "2",
|
||||
},
|
||||
],
|
||||
},
|
||||
DatePicker: {
|
||||
_component: "@budibase/materialdesign-components/DatePicker",
|
||||
_children: [],
|
||||
label: "Date of Admission",
|
||||
onSelect: date => console.log("SELECTED DATE", date),
|
||||
},
|
||||
IconButton: {
|
||||
_component: "@budibase/materialdesign-components/IconButton",
|
||||
_children: [],
|
||||
icon: "calendar_today",
|
||||
},
|
||||
Card: {
|
||||
_id: "card",
|
||||
width: "400",
|
||||
_component: "@budibase/materialdesign-components/Card",
|
||||
_children: [
|
||||
{
|
||||
_id: "cardbody",
|
||||
_component: "@budibase/materialdesign-components/CardBody",
|
||||
onClick: () => alert`Hi`,
|
||||
_children: [
|
||||
{
|
||||
_id: "cardimage1",
|
||||
_component: "@budibase/materialdesign-components/CardImage",
|
||||
_children: [],
|
||||
displayHorizontal: true,
|
||||
url: "https://picsum.photos/350",
|
||||
title: "Our New World",
|
||||
subtitle: "Out now in cinemas",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/CardFooter",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Button",
|
||||
text: "Save",
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Button",
|
||||
text: "Cancel",
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/IconButton",
|
||||
icon: "3d_rotation",
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/IconButton",
|
||||
icon: "accessibility",
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/IconButton",
|
||||
icon: "alarm_on",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
Dialog: {
|
||||
_component: "@budibase/materialdesign-components/Dialog",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/DialogHeader",
|
||||
title: "Important Message",
|
||||
_children: [],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/DialogContent",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/H3",
|
||||
text: "An announcement from your service provider",
|
||||
_children: [],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Body2",
|
||||
text:
|
||||
"All non-essential services will be shut down as of tomorrow. Please acknowledge that you have seen this message by confirming below.",
|
||||
_children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/DialogActions",
|
||||
_children: [
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Button",
|
||||
text: "Confirm",
|
||||
variant: "unelevated",
|
||||
_children: [],
|
||||
},
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/Button",
|
||||
text: "Cancel",
|
||||
_children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
Switch: {
|
||||
_component: "@budibase/materialdesign-components/Switch",
|
||||
label: "On / Off",
|
||||
checked: true,
|
||||
onChange: () => console.log("Switch Changed"),
|
||||
_children: [],
|
||||
},
|
||||
Slider: {
|
||||
_component: "@budibase/materialdesign-components/Slider",
|
||||
_children: [],
|
||||
},
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
export const rootComponent = window => {
|
||||
return function(opts) {
|
||||
const node = window.document.createElement("DIV")
|
||||
const $set = props => {
|
||||
props._bb.attachChildren(node)
|
||||
}
|
||||
const $destroy = () => {
|
||||
if (opts.target && node) opts.target.removeChild(node)
|
||||
}
|
||||
this.$set = $set
|
||||
this.$set(opts.props)
|
||||
this.$destroy = $destroy
|
||||
opts.target.appendChild(node)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import * as components from "@BBMD"
|
||||
|
||||
export default components
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import App from "./TestApp.svelte"
|
||||
|
||||
const app = new App({
|
||||
target: document.body,
|
||||
})
|
||||
|
||||
export default app
|
||||
|
|
@ -1 +0,0 @@
|
|||
<div class="mdc-text-field-character-counter" />
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<script>
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
import CharacterCounter from "./CharacterCounter.svelte"
|
||||
|
||||
export let persistent = false
|
||||
export let validation = false
|
||||
export let useCharCounter = false
|
||||
export let errorText = ""
|
||||
export let helperText = ""
|
||||
|
||||
const cb = new ClassBuilder("text-field-helper-text")
|
||||
|
||||
let modifiers = { persistent, validation }
|
||||
let props = { modifiers }
|
||||
|
||||
let helperClasses = cb.build({ props })
|
||||
</script>
|
||||
|
||||
<div class="mdc-text-field-helper-line">
|
||||
<div class={helperClasses}>{!!errorText ? errorText : helperText}</div>
|
||||
{#if useCharCounter}
|
||||
<CharacterCounter />
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -1,195 +0,0 @@
|
|||
<script>
|
||||
import { setContext, onMount } from "svelte"
|
||||
import { MDCTextField } from "@material/textfield"
|
||||
import { MDCLineRipple } from "@material/line-ripple"
|
||||
|
||||
import ClassBuilder from "../ClassBuilder.js"
|
||||
import NotchedOutline from "../Common/NotchedOutline.svelte"
|
||||
import FloatingLabel from "../Common/FloatingLabel.svelte"
|
||||
import HelperText from "./HelperText.svelte"
|
||||
import CharacterCounter from "./CharacterCounter.svelte"
|
||||
import Icon from "../Common/Icon.svelte"
|
||||
import { IconButton } from "../IconButton"
|
||||
|
||||
const cb = new ClassBuilder("text-field", ["primary", "medium"])
|
||||
|
||||
let tf = null
|
||||
export let tfHeight = null
|
||||
let tfInstance = null
|
||||
|
||||
onMount(() => {
|
||||
if (!!tf) tfInstance = new MDCTextField(tf)
|
||||
return () => {
|
||||
!!tfInstance && tf.tfInstance && tf.tfInstance.destroy()
|
||||
tf = null
|
||||
}
|
||||
})
|
||||
|
||||
export let onChange = text => {}
|
||||
|
||||
export let label = ""
|
||||
export let variant = "standard" //outlined | filled | standard
|
||||
export let disabled = false
|
||||
export let fullwidth = false
|
||||
export let colour = "primary"
|
||||
export let size = "medium"
|
||||
export let type = "text" //text or password
|
||||
export let required = false
|
||||
export let minLength = null
|
||||
export let maxLength = null
|
||||
export let helperText = ""
|
||||
export let errorText = ""
|
||||
export let placeholder = ""
|
||||
export let icon = ""
|
||||
export let trailingIcon = false
|
||||
export let useIconButton = false
|
||||
export let iconButtonClick = () => {}
|
||||
export let textarea = false
|
||||
export let validation = false
|
||||
export let persistent = false
|
||||
export let value
|
||||
export let _bb
|
||||
|
||||
let id = `${label}-${variant}`
|
||||
|
||||
let modifiers = { fullwidth, disabled, textarea }
|
||||
let customs = { colour }
|
||||
|
||||
if (variant == "standard" || fullwidth) {
|
||||
customs = { ...customs, variant }
|
||||
} else {
|
||||
modifiers = { ...modifiers, variant }
|
||||
}
|
||||
|
||||
if (!textarea && size !== "medium") {
|
||||
customs = { ...customs, size }
|
||||
}
|
||||
|
||||
if (!label || fullwidth) {
|
||||
modifiers = { ...modifiers, noLabel: "no-label" }
|
||||
}
|
||||
|
||||
let useLabel = !!label && (!fullwidth || (fullwidth && textarea))
|
||||
let useIcon = !!icon && !textarea && !fullwidth
|
||||
|
||||
if (useIcon) {
|
||||
let iconClass = trailingIcon ? "with-trailing-icon" : "with-leading-icon"
|
||||
modifiers = { ...modifiers, iconClass }
|
||||
}
|
||||
|
||||
$: useNotchedOutline = variant == "outlined" || textarea
|
||||
$: renderLeadingIcon = useIcon && !trailingIcon
|
||||
$: renderTrailingIcon = useIcon && trailingIcon
|
||||
$: safeMaxLength = maxLength <= 0 ? undefined : maxLength
|
||||
|
||||
let props = { modifiers, customs }
|
||||
const blockClasses = cb.build({ props })
|
||||
const inputClasses = cb.elem("input")
|
||||
|
||||
function focus(event) {
|
||||
tfInstance.focus()
|
||||
}
|
||||
|
||||
function changed(e) {
|
||||
const val = e.target.value
|
||||
value = val
|
||||
if (_bb.isBound(_bb.props.value)) {
|
||||
_bb.setStateFromBinding(_bb.props.value, val)
|
||||
}
|
||||
_bb.call(onChange, val)
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--
|
||||
TODO:Needs error handling - this will depend on how Budibase handles errors
|
||||
-->
|
||||
|
||||
<div class="textfield-container" class:fullwidth>
|
||||
<div bind:this={tf} bind:clientHeight={tfHeight} class={blockClasses}>
|
||||
{#if textarea}
|
||||
{#if maxLength}
|
||||
<CharacterCounter />
|
||||
{/if}
|
||||
<textarea
|
||||
{id}
|
||||
class={inputClasses}
|
||||
class:fullwidth
|
||||
{disabled}
|
||||
rows="5"
|
||||
cols="70"
|
||||
{required}
|
||||
{placeholder}
|
||||
{value}
|
||||
{minLength}
|
||||
maxlength={safeMaxLength}
|
||||
on:change={changed} />
|
||||
{:else}
|
||||
{#if renderLeadingIcon}
|
||||
{#if useIconButton}
|
||||
<IconButton
|
||||
{_bb}
|
||||
{icon}
|
||||
context="mdc-text-field__icon mdc-text-field__icon--leading"
|
||||
onClick={iconButtonClick} />
|
||||
{:else}
|
||||
<Icon context="text-field__icon" {icon} />
|
||||
{/if}
|
||||
{/if}
|
||||
<input
|
||||
{id}
|
||||
{disabled}
|
||||
class={inputClasses}
|
||||
{type}
|
||||
{required}
|
||||
{minLength}
|
||||
maxLength={safeMaxLength}
|
||||
placeholder={!!label && fullwidth ? label : placeholder}
|
||||
{value}
|
||||
aria-label={`Textfield ${variant}`}
|
||||
on:focus={focus}
|
||||
on:input={changed} />
|
||||
{#if renderTrailingIcon}
|
||||
{#if useIconButton}
|
||||
<IconButton
|
||||
{_bb}
|
||||
{icon}
|
||||
context="mdc-text-field__icon mdc-text-field__icon--trailing"
|
||||
onClick={iconButtonClick} />
|
||||
{:else}
|
||||
<Icon context="text-field__icon" {icon} />
|
||||
{/if}
|
||||
{/if}
|
||||
{#if variant !== 'outlined'}
|
||||
<div class="mdc-line-ripple" />
|
||||
{/if}
|
||||
{/if}
|
||||
{#if useNotchedOutline}
|
||||
<NotchedOutline {useLabel}>
|
||||
{#if useLabel}
|
||||
<FloatingLabel forInput={id} text={label} />
|
||||
{/if}
|
||||
</NotchedOutline>
|
||||
{:else if useLabel}
|
||||
<FloatingLabel forInput={id} text={label} />
|
||||
{/if}
|
||||
</div>
|
||||
<HelperText
|
||||
{persistent}
|
||||
{validation}
|
||||
{errorText}
|
||||
{helperText}
|
||||
useCharCounter={!!maxLength && !textarea} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.textfield-container {
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 227px;
|
||||
}
|
||||
|
||||
.fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
@import "@material/textfield/mdc-text-field.scss";
|
||||
@import "@material/line-ripple/mdc-line-ripple.scss";
|
||||
@import "./mixins.scss";
|
||||
|
||||
@include bbmd-textfield-styles();
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
@import "@material/feature-targeting/_functions.scss";
|
||||
@import "@material/feature-targeting/_mixins.scss";
|
||||
|
||||
@mixin bbmd-textfield-styles($query: mdc-feature-all()) {
|
||||
$feat-structure: mdc-feature-create-target($query, structure);
|
||||
|
||||
.mdc-text-field {
|
||||
&.bbmd-mdc-text-field--size-small {
|
||||
@include mdc-text-field-height(48px);
|
||||
}
|
||||
|
||||
&.bbmd-mdc-text-field--size-large {
|
||||
@include mdc-text-field-height(64px);
|
||||
}
|
||||
|
||||
&.bbmd-mdc-text-field--colour-secondary {
|
||||
&.mdc-text-field--focused {
|
||||
.mdc-floating-label--float-above {
|
||||
@include mdc-floating-label-ink-color(secondary)
|
||||
|
||||
}
|
||||
}
|
||||
.mdc-line-ripple--active {
|
||||
@include mdc-line-ripple-color(secondary);
|
||||
}
|
||||
|
||||
&.mdc-text-field--outlined,
|
||||
&.mdc-text-field--textarea {
|
||||
@include mdc-text-field-focused-outline-color(secondary);
|
||||
}
|
||||
}
|
||||
|
||||
&.bbmd-mdc-text-field--variant-standard {
|
||||
@include mdc-text-field-fill-color(transparent);
|
||||
&:before {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
+ .mdc-text-field-helper-line {
|
||||
@include mdc-feature-targets($feat-structure) {
|
||||
padding-right: 0px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import "./_index.scss"
|
||||
export { default as Textfield } from "./Textfield.svelte"
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 0
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<span
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px;`}
|
||||
class="mdc-typography--body1">
|
||||
{text}
|
||||
</span>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 0
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<span
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--body2">
|
||||
{text}
|
||||
</span>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 0
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<span
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--caption">
|
||||
{text}
|
||||
</span>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 5
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<h1
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--headline1">
|
||||
{text}
|
||||
</h1>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 5
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<h2
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--headline2">
|
||||
{text}
|
||||
</h2>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 5
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<h3
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--headline3">
|
||||
{text}
|
||||
</h3>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 5
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<h4
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--headline4">
|
||||
{text}
|
||||
</h4>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 5
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<h5
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--headline5">
|
||||
{text}
|
||||
</h5>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 5
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<h6
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--headline6">
|
||||
{text}
|
||||
</h6>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
export let text = ""
|
||||
export let verticalMargin = 0
|
||||
export let horizontalMargin = 0
|
||||
</script>
|
||||
|
||||
<span
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
class="mdc-typography--overline">
|
||||
{text}
|
||||
</span>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue