goodteditor-ui 1.0.9 → 1.0.12

package/.eslintrc.js

@@ -1,8 +1,8 @@
-module.exports = {
-    'extends': 'plugin:vue/essential',
-    'parserOptions': {
-        parser: 'babel-eslint',
-        sourceType: 'module',
-        allowImportExportEverywhere: true
-    }
+module.exports = {
+    'extends': 'plugin:vue/essential',
+    'parserOptions': {
+        parser: 'babel-eslint',
+        sourceType: 'module',
+        allowImportExportEverywhere: true
+    }
 }

package/.idea/codeStyles/Project.xml

@@ -0,0 +1,51 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+      <option name="HTML_QUOTE_STYLE" value="Single" />
+      <option name="HTML_ENFORCE_QUOTES" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_WITHIN_ARRAY_INITIALIZER_BRACKETS" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="4" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="100" />
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="100" />
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="4" />
+        <option name="TAB_SIZE" value="4" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>

package/.idea/goodt-ui.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/goodt-ui.iml" filepath="$PROJECT_DIR$/.idea/goodt-ui.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/.prettierrc

@@ -1,14 +1,14 @@
-{
-    "printWidth": 100,
-    "tabWidth": 4,
-    "useTabs": false,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5",
-    "bracketSpacing": true,
-    "jsxBracketSameLine": true,
-    "arrowParens": "avoid",
-    "requirePragma": false,
-    "insertPragma": false,
-    "proseWrap": "preserve"
-}
+{
+    "printWidth": 100,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": true,
+    "arrowParens": "avoid",
+    "requirePragma": false,
+    "insertPragma": false,
+    "proseWrap": "preserve"
+}

package/README.md

@@ -1,35 +1,35 @@
-# goodt-ui
-
-Docs @ https://goodt-ui.netlify.app/
-
-## Project setup
-
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-
-```
-npm run serve
-```
-
-### Usage
-
-```html
-// Example usage in -> MyComponent.vue
-<template>
-    <div>
-        <ui-color-picker></ui-color-picker>
-    </div>
-</template>
-<script>
-    import { ColorPicker as UiColorPicker } from 'goodt-ui';
-
-    export default {
-        components: {
-            UiColorPicker,
-        },
-    };
-</script>
-```
+# goodt-ui
+
+Docs @ https://goodt-ui.netlify.app/
+
+## Project setup
+
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+
+```
+npm run serve
+```
+
+### Usage
+
+```html
+// Example usage in -> MyComponent.vue
+<template>
+    <div>
+        <ui-color-picker></ui-color-picker>
+    </div>
+</template>
+<script>
+    import { ColorPicker as UiColorPicker } from 'goodt-ui';
+
+    export default {
+        components: {
+            UiColorPicker,
+        },
+    };
+</script>
+```

package/babel.config.js

@@ -1,5 +1,5 @@
-module.exports = {
-    presets: [
-        '@vue/cli-plugin-babel/preset'
-    ]
-}
+module.exports = {
+    presets: [
+        '@vue/cli-plugin-babel/preset'
+    ]
+}

package/index.js

@@ -1,47 +1,51 @@
-import Badge from './src/components/ui/Badge.vue';
-import Collapse from './src/components/ui/Collapse.vue';
-import ColorPicker from './src/components/ui/ColorPicker.vue';
-import Datalist from './src/components/ui/Datalist.vue';
-import DatePicker from './src/components/ui/DatePicker.vue';
-import FileSelector from './src/components/ui/FileSelector.vue';
-import Image from './src/components/ui/Image.vue';
-import InputAutocomplete from './src/components/ui/InputAutocomplete.vue';
-import InputColorPicker from './src/components/ui/InputColorPicker.vue';
-import InputDatePicker from './src/components/ui/InputDatePicker.vue';
-import InputTags from './src/components/ui/InputTags.vue';
-import InputTimePicker from './src/components/ui/InputTimePicker.vue';
-import InputUnits from './src/components/ui/InputUnits.vue';
-import Lazy from './src/components/ui/Lazy.vue';
-import Pagination from './src/components/ui/Pagination.vue';
-import Paginator from './src/components/ui/Paginator.vue';
-import Popover from './src/components/ui/Popover.vue';
-import Popup from './src/components/ui/Popup.vue';
-import Select from './src/components/ui/Select.vue';
-import TimePicker from './src/components/ui/TimePicker.vue';
-import Tooltip from './src/components/ui/Tooltip.vue';
-import Grid from './src/components/ui/Grid.vue';
-
-export {
-    Badge,
-    Collapse,
-    ColorPicker,
-    Datalist,
-    DatePicker,
-    FileSelector,
-    Image,
-    InputAutocomplete,
-    InputColorPicker,
-    InputDatePicker,
-    InputTags,
-    InputTimePicker,
-    InputUnits,
-    Lazy,
-    Pagination,
-    Paginator,
-    Popover,
-    Popup,
-    Select,
-    TimePicker,
-    Tooltip,
-    Grid
-};
+import Avatar from './src/components/ui/Avatar.vue';
+import Badge from './src/components/ui/Badge.vue';
+import Collapse from './src/components/ui/Collapse.vue';
+import ColorPicker from './src/components/ui/ColorPicker.vue';
+import Datalist from './src/components/ui/Datalist.vue';
+import DatePicker from './src/components/ui/DatePicker.vue';
+import FileSelector from './src/components/ui/FileSelector.vue';
+import Image from './src/components/ui/Image.vue';
+import InputAutocomplete from './src/components/ui/InputAutocomplete.vue';
+import InputColorPicker from './src/components/ui/InputColorPicker.vue';
+import InputDatePicker from './src/components/ui/InputDatePicker.vue';
+import InputTags from './src/components/ui/InputTags.vue';
+import InputTimePicker from './src/components/ui/InputTimePicker.vue';
+import InputUnits from './src/components/ui/InputUnits.vue';
+import Lazy from './src/components/ui/Lazy.vue';
+import Pagination from './src/components/ui/Pagination.vue';
+import Paginator from './src/components/ui/Paginator.vue';
+import Popover from './src/components/ui/Popover.vue';
+import Popup from './src/components/ui/Popup.vue';
+import ResponsiveContainer from './src/components/ui/ResponsiveContainer.vue';
+import Select from './src/components/ui/Select.vue';
+import TimePicker from './src/components/ui/TimePicker.vue';
+import Tooltip from './src/components/ui/Tooltip.vue';
+import Grid from './src/components/ui/Grid.vue';
+
+export {
+    Avatar,
+    Badge,
+    Collapse,
+    ColorPicker,
+    Datalist,
+    DatePicker,
+    FileSelector,
+    Image,
+    InputAutocomplete,
+    InputColorPicker,
+    InputDatePicker,
+    InputTags,
+    InputTimePicker,
+    InputUnits,
+    Lazy,
+    Pagination,
+    Paginator,
+    Popover,
+    Popup,
+    ResponsiveContainer,
+    Select,
+    TimePicker,
+    Tooltip,
+    Grid,
+};

package/jsconfig.json

@@ -1,14 +1,14 @@
-{
-    "compilerOptions": {
-        "target": "es6",
-        "module": "commonjs",
-        "allowSyntheticDefaultImports": true
-    },
-    "include": [
-        "src/**/*"
-    ],
-    "exclude": [
-        "node_modules",
-        "**/node_modules/*"
-    ]
+{
+    "compilerOptions": {
+        "target": "es6",
+        "module": "commonjs",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": [
+        "src/**/*"
+    ],
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
 }

package/package.json

@@ -1,57 +1,57 @@
-{
-    "name": "goodteditor-ui",
-    "version": "1.0.9",
-    "main": "index.js",
-    "homepage": "https://goodt-ui.netlify.app/",
-    "scripts": {
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint",
-        "dev": "vue-styleguidist server",
-        "docs:build": "set NODE_ENV=development && vue-styleguidist build",
-        "docs:deploy": "npx netlify deploy --dir=docs --prod",
-        "notify": "node ./ci/teams-notify.js",
-        "publish": "npm run docs:build && npm run docs:deploy && npm run notify"
-    },
-    "devDependencies": {
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@vue/cli-plugin-babel": "^4.5.11",
-        "@vue/cli-plugin-eslint": "^4.5.11",
-        "@vue/cli-service": "^4.5.11",
-        "axios": "^0.24.0",
-        "babel-eslint": "^10.1.0",
-        "eslint": "^6.7.2",
-        "eslint-plugin-vue": "^6.2.2",
-        "goodt-framework-css": "^1.1.1",
-        "less": "^3.13.1",
-        "less-loader": "^5.0.0",
-        "netlify-cli": "^5.0.1",
-        "vue-styleguidist": "4.35.0",
-        "vue-template-compiler": "^2.6.12"
-    },
-    "peerDependencies": {
-        "vue": "^2.6.12"
-    },
-    "eslintConfig": {
-        "root": true,
-        "env": {
-            "node": true
-        },
-        "extends": [
-            "plugin:vue/essential",
-            "eslint:recommended"
-        ],
-        "parserOptions": {
-            "parser": "babel-eslint"
-        },
-        "rules": {}
-    },
-    "browserslist": [
-        "> 1%",
-        "last 2 versions",
-        "not dead"
-    ],
-    "dependencies": {
-        "@popperjs/core": "2.11.2"
-    }
-}
+{
+    "name": "goodteditor-ui",
+    "version": "1.0.12",
+    "main": "index.js",
+    "homepage": "https://goodt-ui.netlify.app/",
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build",
+        "lint": "vue-cli-service lint",
+        "dev": "vue-styleguidist server",
+        "docs:build": "set NODE_ENV=development && vue-styleguidist build",
+        "docs:deploy": "npx netlify deploy --dir=docs --prod",
+        "notify": "node ./ci/teams-notify.js",
+        "publish": "npm run docs:build && npm run docs:deploy && npm run notify"
+    },
+    "devDependencies": {
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@vue/cli-plugin-babel": "^4.5.11",
+        "@vue/cli-plugin-eslint": "^4.5.11",
+        "@vue/cli-service": "^4.5.11",
+        "axios": "^0.24.0",
+        "babel-eslint": "^10.1.0",
+        "eslint": "^6.7.2",
+        "eslint-plugin-vue": "^6.2.2",
+        "goodt-framework-css": "^1.1.1",
+        "less": "^3.13.1",
+        "less-loader": "^5.0.0",
+        "netlify-cli": "^5.0.1",
+        "vue-styleguidist": "4.35.0",
+        "vue-template-compiler": "^2.6.12"
+    },
+    "peerDependencies": {
+        "vue": "^2.6.12"
+    },
+    "eslintConfig": {
+        "root": true,
+        "env": {
+            "node": true
+        },
+        "extends": [
+            "plugin:vue/essential",
+            "eslint:recommended"
+        ],
+        "parserOptions": {
+            "parser": "babel-eslint"
+        },
+        "rules": {}
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not dead"
+    ],
+    "dependencies": {
+        "@popperjs/core": "2.11.2"
+    }
+}

package/src/App.vue

@@ -1,36 +1,36 @@
-<template>
-    <div id="app" class="pad-l1 w-100">
-        <ui-select
-            class="block"
-            v-model="demoActive"
-            :options="demos"
-            placeholder="Select component"
-        />
-        <component :is="demoComponent" v-if="demoComponent"></component>
-    </div>
-</template>
-
-<script>
-import UiSelect from './components/ui/Select.vue';
-import * as Components from './../index';
-
-export default {
-    name: 'App',
-    components: {
-        UiSelect,
-    },
-    data() {
-        return {
-            demoActive: null,
-            demos: Object.keys(Components).map(i => {
-                return { value: i, label: i };
-            }),
-        };
-    },
-    computed: {
-        demoComponent() {
-            return this.demoActive ? Components[this.demoActive] : null;
-        },
-    },
-};
-</script>
+<template>
+    <div id="app" class="pad-l1 w-100">
+        <ui-select
+            class="block"
+            v-model="demoActive"
+            :options="demos"
+            placeholder="Select component"
+        />
+        <component :is="demoComponent" v-if="demoComponent"></component>
+    </div>
+</template>
+
+<script>
+import UiSelect from './components/ui/Select.vue';
+import * as Components from './../index';
+
+export default {
+    name: 'App',
+    components: {
+        UiSelect,
+    },
+    data() {
+        return {
+            demoActive: null,
+            demos: Object.keys(Components).map(i => {
+                return { value: i, label: i };
+            }),
+        };
+    },
+    computed: {
+        demoComponent() {
+            return this.demoActive ? Components[this.demoActive] : null;
+        },
+    },
+};
+</script>

package/src/components/ui/Avatar.md

@@ -0,0 +1,68 @@
+```vue
+<template>
+    <div class="pad-l5">
+        <div class="p">
+            <!-- default -->
+            <ui-avatar v-bind="props" @load="onLoad" @error="onError"></ui-avatar>
+            
+            <!-- custom slots -->
+            <ui-avatar v-bind="props">
+                <template v-slot="{abbr}">
+                    <code>{{abbr}}</code>
+                </template>
+                <template #loading>loading</template>
+            </ui-avatar>
+        </div>
+        <div class="row">
+            <div class="col">
+                <template v-for="key in Object.keys(props)">
+                    <label class="text-small " v-if="isBool(key)">                
+                        <input class="checkbox checkbox-small" type="checkbox" v-model="props[key]">
+                        <span class="v-mid">{{key}}</span>
+                    </label>
+                    <div :key="key" v-else>
+                        <label class="text-xsmall">{{key}}</label>
+                        <input class="input input-small d-block" type="text" v-model="props[key]">
+                    </div>
+                </template>
+            </div>
+            <div class="col">
+                <pre class="text-xsmall" style="max-height:10rem">{{logStr}}</pre>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import UiAvatar from './Avatar.vue';
+
+export default {
+    components: { UiAvatar },
+    data() {
+        return { 
+            props: { 
+                round: true,
+                src:'https://picsum.photos/150/150',
+                size: '4rem',
+                alt: 'John Wick', 
+                color: '#ffffff',
+                background:'#fca522',
+            },
+            log:[]
+        }
+    },
+    computed: {
+        logStr() {
+            return this.log.reverse().join("\n")
+        }
+    },
+    methods: {
+        isBool(key) {
+            return key === 'round'
+        },
+        addLog(n,e) { this.log.push(`event: ${n}`) },
+        onLoad(e) { this.addLog('load') },
+        onError(e) { this.addLog('error') },
+    }
+};
+</script>
+```