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",
|
name: "Table",
|
||||||
_component: "@budibase/standard-components/datatable",
|
_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",
|
_component: "@budibase/standard-components/dataformwide",
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@budibase/standard-components": "0.x",
|
"@budibase/standard-components": "0.x"
|
||||||
"@budibase/materialdesign-components": "0.x"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
"title": "Test App",
|
"title": "Test App",
|
||||||
"favicon": "./_shared/favicon.png",
|
"favicon": "./_shared/favicon.png",
|
||||||
"stylesheets": [],
|
"stylesheets": [],
|
||||||
"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
|
"componentLibraries": ["@budibase/standard-components"],
|
||||||
"props" : {
|
"props" : {
|
||||||
"_component": "@budibase/standard-components/container",
|
"_component": "@budibase/standard-components/container",
|
||||||
"_children": [],
|
"_children": [],
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
"title": "Test App",
|
"title": "Test App",
|
||||||
"favicon": "./_shared/favicon.png",
|
"favicon": "./_shared/favicon.png",
|
||||||
"stylesheets": [],
|
"stylesheets": [],
|
||||||
"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
|
"componentLibraries": ["@budibase/standard-components"],
|
||||||
"props" : {
|
"props" : {
|
||||||
"_component": "@budibase/standard-components/container",
|
"_component": "@budibase/standard-components/container",
|
||||||
"_children": [],
|
"_children": [],
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
"title": "Test App",
|
"title": "Test App",
|
||||||
"favicon": "./_shared/favicon.png",
|
"favicon": "./_shared/favicon.png",
|
||||||
"stylesheets": [],
|
"stylesheets": [],
|
||||||
"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
|
"componentLibraries": ["@budibase/standard-components" ],
|
||||||
"props" : {
|
"props" : {
|
||||||
"_component": "@budibase/standard-components/container",
|
"_component": "@budibase/standard-components/container",
|
||||||
"_children": [],
|
"_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