mirror of https://github.com/Budibase/budibase.git
Michael Shanks
6 years ago
102 changed files with 0 additions and 3821 deletions
@ -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> |
|
||||
@ -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--subtitle1"> |
|
||||
{text} |
|
||||
</span> |
|
||||
@ -1,11 +0,0 @@ |
|||||
<script> |
|
||||
export let text = "" |
|
||||
export let verticalMargin = 5 |
|
||||
export let horizontalMargin = 0 |
|
||||
</script> |
|
||||
|
|
||||
<span |
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} |
|
||||
class="mdc-typography--subtitle2"> |
|
||||
{text} |
|
||||
</span> |
|
||||
@ -1 +0,0 @@ |
|||||
@import "@material/typography/mdc-typography.scss"; |
|
||||
@ -1,13 +0,0 @@ |
|||||
import "./_style.scss" |
|
||||
export { default as Body1 } from "./Body1.svelte" |
|
||||
export { default as Body2 } from "./Body2.svelte" |
|
||||
export { default as Caption } from "./Caption.svelte" |
|
||||
export { default as H1 } from "./H1.svelte" |
|
||||
export { default as H2 } from "./H2.svelte" |
|
||||
export { default as H3 } from "./H3.svelte" |
|
||||
export { default as H4 } from "./H4.svelte" |
|
||||
export { default as H5 } from "./H5.svelte" |
|
||||
export { default as H6 } from "./H6.svelte" |
|
||||
export { default as Overline } from "./Overline.svelte" |
|
||||
export { default as Sub1 } from "./Sub1.svelte" |
|
||||
export { default as Sub2 } from "./Sub2.svelte" |
|
||||
@ -1,2 +0,0 @@ |
|||||
@import "https://fonts.googleapis.com/css?family=Roboto:300,400,500"; |
|
||||
@import "https://fonts.googleapis.com/icon?family=Material+Icons"; |
|
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue