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