jewbird
/
asciibird
3
3
Fork 0
Code Issues Pull Requests Releases Activity

css fix, reviewed js loading and packages

This commit is contained in:
Hugh Bord 2021-08-04 14:52:29 +10:00
parent f7e7849069
commit bfa9c46d82
9 changed files with 2092 additions and 2037 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
package.json
View File

@ -12,8 +12,13 @@
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/vue-fontawesome": "^2.0.2",
"@tailwindcss/forms": "^0.3.3",
"@tailwindcss/postcss7-compat": "^2.2.7",
"autoprefixer": "^9",
"lz-string": "^1.4.4",
"tailwindcss": "^2.2.7",
"postcss": "^7",
"postcss-loader": "^6.1.1",
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
"vue": "^2.6.11",
"vue-clipboard2": "^0.3.1",
"vue-draggable-resizable": "^2.3.0",
@ -26,7 +31,6 @@
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-airbnb": "^5.0.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
@ -34,7 +38,8 @@
"lint-staged": "^9.5.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
"vue-template-compiler": "^2.6.11",
"webpack": "^5.48.0"
},
"eslintConfig": {
"root": true,
@ -42,8 +47,7 @@
"node": true
},
"extends": [
"plugin:vue/essential",
"@vue/airbnb"
"plugin:vue/strongly-recommended"
],
"parserOptions": {
"parser": "babel-eslint"
@ -63,4 +67,4 @@
"git add"
]
}
}
}

6
postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

1
public/index.html
View File

@ -5,7 +5,6 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hack-font@3.3.0/build/web/hack.css">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>

18
src/fontAwesome.js Normal file
View File

@ -0,0 +1,18 @@
import {
library,
} from '@fortawesome/fontawesome-svg-core';
import {
faMousePointer,
faFont,
faFillDrip,
faPaintBrush,
faEyeDropper,
faEraser,
faSync,
} from '@fortawesome/free-solid-svg-icons';
import {
faSquare,
} from '@fortawesome/free-regular-svg-icons';
library.add(faMousePointer, faSquare, faFont, faFillDrip, faPaintBrush, faEyeDropper, faEraser,
faSync);

183
src/main.js
View File

@ -1,189 +1,22 @@
import Vue from 'vue';
import './style.css';
import VueTailwind from 'vue-tailwind';
import VueDraggableResizable from 'vue-draggable-resizable';
import VueClipboard from 'vue-clipboard2';
import {
TInput,
TTextarea,
// TSelect,
TRadio,
TCheckbox,
TButton,
// TInputGroup,
TCard,
// TAlert,
TModal,
// TDropdown,
// TRichSelect,
// TPagination,
// TTag,
// TRadioGroup,
// TCheckboxGroup,
// TTable,
// TDatepicker,
// TToggle,
// TDialog,
} from 'vue-tailwind/dist/components';
// optionally import default styles
import { tailwindCss } from './tailwindSettings';
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
import {
library,
} from '@fortawesome/fontawesome-svg-core';
import {
faMousePointer,
faFont,
faFillDrip,
faPaintBrush,
faEyeDropper,
faEraser,
faSync,
} from '@fortawesome/free-solid-svg-icons';
import {
faSquare,
} from '@fortawesome/free-regular-svg-icons';
import {
FontAwesomeIcon,
} from '@fortawesome/vue-fontawesome';
import store from './store';
import Dashboard from './Dashboard.vue';
library.add(faMousePointer, faSquare, faFont, faFillDrip, faPaintBrush, faEyeDropper, faEraser,
faSync);
Vue.config.productionTip = false;
const settings = {
// Use the following syntax
// {component-name}: {
// component: {importedComponentObject},
// props: {
// {propToOverride}: {newDefaultValue}
// {propToOverride2}: {newDefaultValue2}
// }
// }
't-card': {
component: TCard,
props: {
fixedClasses: {
wrapper: 'border rounded shadow-sm ',
body: 'p-3',
header: 'border-b p-3 rounded-t',
footer: 'border-t p-3 rounded-b',
},
classes: {
wrapper: 'bg-white border-gray-100',
body: '',
header: 'border-gray-100',
footer: 'border-gray-100',
},
variants: {
danger: {
wrapper: 'bg-red-50 text-red-700 border-red-200',
header: 'border-red-200 text-red-700',
footer: 'border-red-200 text-red-700',
},
},
},
},
't-input': {
component: TInput,
props: {
classes: 'border-2 block w-full rounded text-gray-800',
},
},
't-textarea': {
component: TTextarea,
props: {
classes: 'border-2 block w-full rounded text-gray-800',
},
},
't-button': {
component: TButton,
props: {
classes: 'text-white bg-green-500 border border-transparent rounded shadow-sm hover:bg-green-600',
},
},
't-modal': {
component: TModal,
fixedClasses: {
overlay: 'z-40 overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-opacity-50',
wrapper: 'relative mx-auto z-50 max-w-lg px-3 py-12',
modal: 'overflow-visible relative rounded',
body: 'p-3',
header: 'border-b p-3 rounded-t',
footer: ' p-3 rounded-b',
close: 'flex items-center justify-center rounded-full absolute right-0 top-0 -m-3 h-8 w-8 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
},
classes: {
overlay: 'bg-black',
wrapper: '',
modal: 'bg-white shadow',
body: 'p-3',
header: 'border-gray-100',
footer: 'bg-gray-100',
close: 'bg-gray-100 text-gray-600 hover:bg-gray-200',
closeIcon: 'fill-current h-4 w-4',
overlayEnterClass: '',
overlayEnterActiveClass: 'opacity-0 transition ease-out duration-100',
overlayEnterToClass: 'opacity-100',
overlayLeaveClass: 'transition ease-in opacity-100',
overlayLeaveActiveClass: '',
overlayLeaveToClass: 'opacity-0 duration-75',
enterClass: '',
enterActiveClass: '',
enterToClass: '',
leaveClass: '',
leaveActiveClass: '',
leaveToClass: '',
},
variants: {
danger: {
overlay: 'bg-red-100',
header: 'border-red-50 text-red-700',
close: 'bg-red-50 text-red-700 hover:bg-red-200 border-red-100 border',
modal: 'bg-white border border-red-100 shadow-lg',
footer: 'bg-red-50',
},
},
import {
FontAwesomeIcon,
} from '@fortawesome/vue-fontawesome';
import './fontAwesome';
},
't-checkbox': {
component: TCheckbox,
props: {
wrapped: true,
classes: {
label: 'text-sm uppercase mx-2 text-gray-700',
input: 'text-blue-500 transition duration-100 ease-in-out border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed',
inputWrapper: 'inline-flex',
wrapper: 'flex items-center',
// labelChecked: '',
// inputWrapperChecked: '',
// wrapperChecked: '',
},
// Variants and fixed classes in the same `object` format ...
},
},
't-radio': {
component: TRadio,
props: {
wrapped: true,
classes: {
label: 'text-sm uppercase mx-2 text-gray-700',
input: 'text-blue-500 transition duration-100 ease-in-out border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out',
inputWrapper: 'inline-flex',
wrapper: 'flex items-center',
// labelChecked: '',
// inputWrapperChecked: '',
// wrapperChecked: '',
},
// Variants and fixed classes in the same `object` format ...
},
},
};
Vue.use(VueTailwind, settings);
Vue.use(VueTailwind, tailwindCss);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.component('vue-draggable-resizable', VueDraggableResizable);
Vue.use(VueClipboard);

9
src/style.css Normal file
View File

@ -0,0 +1,9 @@
/* tailwind css */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* tailwind css */
/* custom css */

151
src/tailwindSettings.js Normal file
View File

@ -0,0 +1,151 @@
import {
TInput,
TTextarea,
// TSelect,
TRadio,
TCheckbox,
TButton,
// TInputGroup,
TCard,
// TAlert,
TModal,
// TDropdown,
// TRichSelect,
// TPagination,
// TTag,
// TRadioGroup,
// TCheckboxGroup,
// TTable,
// TDatepicker,
// TToggle,
// TDialog,
} from 'vue-tailwind/dist/components';
export const tailwindCss = {
// Use the following syntax
// {component-name}: {
// component: {importedComponentObject},
// props: {
// {propToOverride}: {newDefaultValue}
// {propToOverride2}: {newDefaultValue2}
// }
// }
't-card': {
component: TCard,
props: {
fixedClasses: {
wrapper: 'border rounded shadow-sm ',
body: 'p-3',
header: 'border-b p-3 rounded-t',
footer: 'border-t p-3 rounded-b',
},
classes: {
wrapper: 'bg-gray border-black-100',
body: '',
header: 'border-black-100',
footer: 'border-black-100',
},
variants: {
danger: {
wrapper: 'bg-red-50 text-red-700 border-red-200',
header: 'border-red-200 text-red-700',
footer: 'border-red-200 text-red-700',
},
},
},
},
't-input': {
component: TInput,
props: {
classes: 'border-2 block w-full rounded text-gray-800',
},
},
't-textarea': {
component: TTextarea,
props: {
classes: 'border-2 block w-full rounded text-gray-800',
},
},
't-button': {
component: TButton,
props: {
classes: 'text-white bg-green-500 border border-transparent rounded shadow-sm hover:bg-green-600',
},
},
't-modal': {
component: TModal,
fixedClasses: {
overlay: 'z-40 overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-opacity-50',
wrapper: 'relative mx-auto z-50 max-w-lg px-3 py-12',
modal: 'overflow-visible relative rounded',
body: 'p-3',
header: 'border-b p-3 rounded-t',
footer: ' p-3 rounded-b',
close: 'flex items-center justify-center rounded-full absolute right-0 top-0 -m-3 h-8 w-8 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
},
classes: {
overlay: 'bg-black',
wrapper: '',
modal: 'bg-white shadow',
body: 'p-3',
header: 'border-gray-100',
footer: 'bg-gray-100',
close: 'bg-gray-100 text-gray-600 hover:bg-gray-200',
closeIcon: 'fill-current h-4 w-4',
overlayEnterClass: '',
overlayEnterActiveClass: 'opacity-0 transition ease-out duration-100',
overlayEnterToClass: 'opacity-100',
overlayLeaveClass: 'transition ease-in opacity-100',
overlayLeaveActiveClass: '',
overlayLeaveToClass: 'opacity-0 duration-75',
enterClass: '',
enterActiveClass: '',
enterToClass: '',
leaveClass: '',
leaveActiveClass: '',
leaveToClass: '',
},
variants: {
danger: {
overlay: 'bg-red-100',
header: 'border-red-50 text-red-700',
close: 'bg-red-50 text-red-700 hover:bg-red-200 border-red-100 border',
modal: 'bg-white border border-red-100 shadow-lg',
footer: 'bg-red-50',
},
},
},
't-checkbox': {
component: TCheckbox,
props: {
wrapped: true,
classes: {
label: 'text-sm uppercase mx-2 text-gray-700',
input: 'text-blue-500 transition duration-100 ease-in-out border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed',
inputWrapper: 'inline-flex',
wrapper: 'flex items-center',
// labelChecked: '',
// inputWrapperChecked: '',
// wrapperChecked: '',
},
// Variants and fixed classes in the same `object` format ...
},
},
't-radio': {
component: TRadio,
props: {
wrapped: true,
classes: {
label: 'text-sm uppercase mx-2 text-gray-700',
input: 'text-blue-500 transition duration-100 ease-in-out border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out',
inputWrapper: 'inline-flex',
wrapper: 'flex items-center',
// labelChecked: '',
// inputWrapperChecked: '',
// wrapperChecked: '',
},
// Variants and fixed classes in the same `object` format ...
},
},
};

15
tailwind.config.js
View File

@ -1,11 +1,6 @@
const tailwindcss = require('tailwindcss');
module.exports = {
purge: [
'./MySettings.js',
'node_modules/vue-tailwind/dist/*.js',
],
darkMode: false, // or 'media' or 'class'
purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
darkMode: false,
theme: {
extend: {},
},
@ -13,6 +8,8 @@ module.exports = {
extend: {},
},
plugins: [
tailwindcss,
require('@tailwindcss/forms'),
require('tailwindcss'),
require('autoprefixer'),
],
};
};

3730
yarn.lock
View File

File diff suppressed because it is too large Load Diff