sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-11-29 14:35:48 +01:00
parent cfd1a98dd5 3e816ce034
commit 50aae8d0a4
12 changed files with 3436 additions and 5866 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.js
+4 -3
View File
@@ -4,16 +4,17 @@ module.exports = {
node: true, node: true,
}, },
extends: [ extends: [
'plugin:vue/vue3-recommended', 'plugin:vue/vue3-essential',
'eslint:recommended', 'eslint:recommended',
'@vue/prettier', 'plugin:prettier/recommended',
], ],
parserOptions: { parserOptions: {
parser: 'babel-eslint', parser: '@babel/eslint-parser',
}, },
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/multi-word-component-names': 'off',
}, },
overrides: [ overrides: [
{ {
jest.config.js
-3
View File
@@ -1,6 +1,3 @@
module.exports = { module.exports = {
preset: '@vue/cli-plugin-unit-jest', preset: '@vue/cli-plugin-unit-jest',
transform: {
'^.+\\.vue$': 'vue-jest',
},
} }
jsconfig.json
+19
View File
@@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
package.json
+24 -21
View File
@@ -1,6 +1,6 @@
{ {
"name": "@coreui/coreui-free-vue-admin-template", "name": "@coreui/coreui-free-vue-admin-template",
"version": "4.0.1", "version": "4.1.0",
"description": "CoreUI Free Vue Admin Template", "description": "CoreUI Free Vue Admin Template",
"bugs": { "bugs": {
"url": "https://github.com/coreui/coreui-free-vue-admin-template/issues" "url": "https://github.com/coreui/coreui-free-vue-admin-template/issues"
@@ -19,39 +19,42 @@
"test:unit": "vue-cli-service test:unit" "test:unit": "vue-cli-service test:unit"
}, },
"config": { "config": {
"coreui_library_short_version": "4.0" "coreui_library_short_version": "4.1"
}, },
"dependencies": { "dependencies": {
"@coreui/chartjs": "^3.0.0", "@coreui/chartjs": "^3.0.0",
"@coreui/coreui": "^4.0.5", "@coreui/coreui": "^4.1.0",
"@coreui/icons": "^2.1.0", "@coreui/icons": "^2.1.0",
"@coreui/icons-vue": "2.0.0", "@coreui/icons-vue": "2.0.0",
"@coreui/utils": "^1.3.1", "@coreui/utils": "^1.3.1",
"@coreui/vue": "^4.0.1", "@coreui/vue": "^4.1.0",
"@coreui/vue-chartjs": "2.0.0", "@coreui/vue-chartjs": "2.0.0",
"core-js": "^3.19.0", "core-js": "^3.19.0",
"vue": "^3.2.19", "vue": "^3.2.23",
"vue-router": "^4.0.0-0", "vue-router": "^4.0.12",
"vuex": "^4.0.0-0" "vuex": "^4.0.2"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.14", "@babel/core": "^7.12.16",
"@vue/cli-plugin-e2e-cypress": "~4.5.14", "@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-eslint": "~4.5.14", "@vue/cli-plugin-babel": "~5.0.0-rc.1",
"@vue/cli-plugin-router": "~4.5.14", "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
"@vue/cli-plugin-unit-jest": "~4.5.14", "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
"@vue/cli-plugin-vuex": "~4.5.14", "@vue/cli-plugin-router": "~5.0.0-rc.1",
"@vue/cli-service": "~4.5.14", "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
"@vue/compiler-sfc": "^3.2.20", "@vue/cli-plugin-vuex": "~5.0.0-rc.1",
"@vue/eslint-config-prettier": "^6.0.0", "@vue/cli-service": "~5.0.0-rc.1",
"@vue/test-utils": "^2.0.0-0", "@vue/test-utils": "^2.0.0-0",
"babel-eslint": "^10.1.0", "@vue/vue3-jest": "^27.0.0-alpha.1",
"babel-jest": "^27.0.6",
"cypress": "^8.7.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0", "eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^7.20.0", "eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
"prettier": "^2.4.1", "prettier": "^2.4.1",
"sass": "^1.43.3", "sass": "^1.32.7",
"sass-loader": "^10.2.0", "sass-loader": "^12.0.0"
"vue-jest": "^5.0.0-0"
} }
} }
public/index.html
+1 -1
View File
@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- <!--
* CoreUI Vue.js Admin Template * CoreUI Vue.js Admin Template
* @version v4.0.1 * @version v4.1.0
* @link https://coreui.io/vue/ * @link https://coreui.io/vue/
* Copyright (c) 2021 creativeLabs Łukasz Holeczek * Copyright (c) 2021 creativeLabs Łukasz Holeczek
* License (https://coreui.io/pro/license) * License (https://coreui.io/pro/license)
src/_nav.js
+5 -1
View File
@@ -70,12 +70,16 @@ export default [
name: 'Navs & Tabs', name: 'Navs & Tabs',
to: '/base/navs', to: '/base/navs',
}, },
{ {
component: 'CNavItem', component: 'CNavItem',
name: 'Paginations', name: 'Paginations',
to: '/base/paginations', to: '/base/paginations',
}, },
{
component: 'CNavItem',
name: 'Placeholders',
to: '/base/placeholders',
},
{ {
component: 'CNavItem', component: 'CNavItem',
name: 'Popovers', name: 'Popovers',
src/router/index.js
+5
View File
@@ -84,6 +84,11 @@ const routes = [
name: 'Paginations', name: 'Paginations',
component: () => import('@/views/base/Paginations.vue'), component: () => import('@/views/base/Paginations.vue'),
}, },
{
path: '/base/placeholders',
name: 'Placeholders',
component: () => import('@/views/base/Placeholders.vue'),
},
{ {
path: '/base/popovers', path: '/base/popovers',
name: 'Popovers', name: 'Popovers',
src/views/Dashboard.vue
+4 -24
View File
@@ -100,12 +100,7 @@
<CRow> <CRow>
<CCol :sm="6"> <CCol :sm="6">
<div <div
class=" class="border-start border-start-4 border-start-info py-1 px-3 mb-3"
border-start border-start-4 border-start-info
py-1
px-3
mb-3
"
> >
<div class="text-medium-emphasis small">New Clients</div> <div class="text-medium-emphasis small">New Clients</div>
<div class="fs-5 fw-semibold">9,123</div> <div class="fs-5 fw-semibold">9,123</div>
@@ -113,12 +108,7 @@
</CCol> </CCol>
<CCol :sm="6"> <CCol :sm="6">
<div <div
class=" class="border-start border-start-4 border-start-danger py-1 px-3 mb-3"
border-start border-start-4 border-start-danger
py-1
px-3
mb-3
"
> >
<div class="text-medium-emphasis small"> <div class="text-medium-emphasis small">
Recurring Clients Recurring Clients
@@ -148,12 +138,7 @@
<CRow> <CRow>
<CCol :sm="6"> <CCol :sm="6">
<div <div
class=" class="border-start border-start-4 border-start-warning py-1 px-3 mb-3"
border-start border-start-4 border-start-warning
py-1
px-3
mb-3
"
> >
<div class="text-medium-emphasis small">Pageviews</div> <div class="text-medium-emphasis small">Pageviews</div>
<div class="fs-5 fw-semibold">78,623</div> <div class="fs-5 fw-semibold">78,623</div>
@@ -161,12 +146,7 @@
</CCol> </CCol>
<CCol :sm="6"> <CCol :sm="6">
<div <div
class=" class="border-start border-start-4 border-start-success py-1 px-3 mb-3"
border-start border-start-4 border-start-success
py-1
px-3
mb-3
"
> >
<div class="text-medium-emphasis small">Organic</div> <div class="text-medium-emphasis small">Organic</div>
<div class="fs-5 fw-semibold">49,123</div> <div class="fs-5 fw-semibold">49,123</div>
src/views/base/Collapses.vue
+35
View File
@@ -32,6 +32,39 @@
</DocsExample> </DocsExample>
</CCardBody> </CCardBody>
</CCard> </CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Collapse</strong> <small> Horizontal</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
The collapse plugin also supports horizontal collapsing. Add the
<code>horizontal</code> property to transition the
<code>width</code> instead of <code>height</code> and set a
<code>width</code> on the immediate child element.
</p>
<DocsExample href="components/collapse.html#horizontal">
<CButton
class="mb-3"
color="primary"
aria-expanded="{visible}"
aria-controls="collapseWidthExample"
@click="visibleHorizontal = !visibleHorizontal"
>Button</CButton
>
<div style="min-height: 120px">
<CCollapse horizontal :visible="visibleHorizontal">
<CCard style="width: 300px">
<CCardBody>
This is some placeholder content for a horizontal collapse.
It's hidden by default and shown when triggered.
</CCardBody>
</CCard>
</CCollapse>
</div>
</DocsExample>
</CCardBody>
</CCard>
<CCard class="mb-4"> <CCard class="mb-4">
<CCardHeader> <CCardHeader>
<strong>Vue Collapse</strong> <small> multi target</small> <strong>Vue Collapse</strong> <small> multi target</small>
@@ -100,10 +133,12 @@ export default {
const visible = ref(false) const visible = ref(false)
const visibleA = ref(false) const visibleA = ref(false)
const visibleB = ref(false) const visibleB = ref(false)
const visibleHorizontal = ref(false)
return { return {
visible, visible,
visibleA, visibleA,
visibleB, visibleB,
visibleHorizontal,
} }
}, },
} }
src/views/base/Placeholders.vue
+190
View File
@@ -0,0 +1,190 @@
<template>
<CRow>
<CCol :xs="12">
<DocsCallout name="Placeholder" href="components/placeholder" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Placeholder</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
In the example below, we take a typical card component and recreate
it with placeholders applied to create a "loading card". Size and
proportions are the same between the two.
</p>
<DocsExample href="components/placeholder">
<div class="d-flex justify-content-around">
<CCard style="width: 18rem">
<CCardImage orientation="top" :src="VueImg" />
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardText>
Some quick example text to build on the card title and make
up the bulk of the card's content.
</CCardText>
<CButton color="primary" href="#">Go somewhere</CButton>
</CCardBody>
</CCard>
<CCard style="width: 18rem">
<CCardImage
component="svg"
orientation="top"
width="100%"
height="162"
role="img"
aria-label="Placeholder"
preserveAspectRatio="xMidYMid slice"
focusable="false"
>
<title>Placeholder</title
><rect width="100%" height="100%" fill="#868e96"></rect>
</CCardImage>
<CCardBody>
<CCardTitle v-c-placeholder="{ animation: 'glow', xs: 7 }">
<CPlaceholder :xs="6" />
</CCardTitle>
<CCardText v-c-placeholder="{ animation: 'glow' }">
<CPlaceholder :xs="7" />
<CPlaceholder :xs="4" />
<CPlaceholder :xs="4" />
<CPlaceholder :xs="6" />
<CPlaceholder :xs="8" />
</CCardText>
<CButton
v-c-placeholder="{ xs: 6 }"
color="primary"
aria-hidden="true"
disabled
href="#"
tabindex="-1"
></CButton>
</CCardBody>
</CCard>
</div>
</DocsExample>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Placeholder</strong>
</CCardHeader>
<CCardBody>
<p>
Create placeholders with the
<code>&lt;CPlaceholder&gt;</code> component and a grid column propx
(e.g., <code>:xs="6"</code>) to set the <code>width</code>. They can
replace the text inside an element or be added as a modifier class
to an existing component.
</p>
<DocsExample href="components/placeholder">
<p aria-hidden="true">
<CPlaceholder :xs="6" />
</p>
<CButton
v-c-placeholder="{ xs: 4 }"
color="primary"
aria-hidden="true"
disabled
href="#"
tabindex="-1"
></CButton>
</DocsExample>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Placeholder</strong> <small> Width</small>
</CCardHeader>
<CCardBody>
<p>
You can change the <code>width</code> through grid column classes,
width utilities, or inline styles.
</p>
<DocsExample href="components/placeholder#width">
<CPlaceholder :xs="6" />
<CPlaceholder class="w-75" />
<CPlaceholder style="width: 30%" />
</DocsExample>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Placeholder</strong> <small> Color</small>
</CCardHeader>
<CCardBody>
<p>
By default, the <code>&lt;CPlaceholder&gt;</code> uses
<code>currentColor</code>. This can be overridden with a custom
color or utility class.
</p>
<DocsExample href="components/placeholder#color">
<CPlaceholder :xs="12" />
<CPlaceholder color="primary" :xs="12" />
<CPlaceholder color="secondary" :xs="12" />
<CPlaceholder color="success" :xs="12" />
<CPlaceholder color="danger" :xs="12" />
<CPlaceholder color="warning" :xs="12" />
<CPlaceholder color="info" :xs="12" />
<CPlaceholder color="light" :xs="12" />
<CPlaceholder color="dark" :xs="12" />
</DocsExample>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Placeholder</strong> <small> Sizing</small>
</CCardHeader>
<CCardBody>
<p>
The size of <code>&lt;CPlaceholder&gt;</code>s are based on the
typographic style of the parent element. Customize them with
<code>size</code> prop: <code>lg</code>, <code>sm</code>, or
<code>xs</code>.
</p>
<DocsExample href="components/placeholder#color">
<CPlaceholder :xs="12" size="lg" />
<CPlaceholder :xs="12" />
<CPlaceholder :xs="12" size="sm" />
<CPlaceholder :xs="12" size="xs" />
</DocsExample>
</CCardBody>
</CCard>
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Placeholder</strong> <small> Animation</small>
</CCardHeader>
<CCardBody>
<p>
Animate placeholders with <code>animation="glow"</code> or
<code>animation="wave"</code> to better convey the perception of
something being <em>actively</em> loaded.
</p>
<DocsExample href="components/placeholder#animation">
<CPlaceholder component="p" animation="glow">
<CPlaceholder :xs="12" />
</CPlaceholder>
<CPlaceholder component="p" animation="wave">
<CPlaceholder :xs="12" />
</CPlaceholder>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
import VueImg from '@/assets/images/vue.jpg'
export default {
name: 'Placeholders',
setup() {
return {
VueImg,
}
},
}
</script>
vue.config.js
+4
View File
@@ -0,0 +1,4 @@
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
})
yarn.lock
+3145 -5813
View File
File diff suppressed because it is too large Load Diff