component, it's no longer needed!"),o("br")],-1)),t[10]||(t[10]=e("Note: there is also an ")),s(d,{to:"/options-presets-and-waveui"},{default:n(()=>t[5]||(t[5]=[e("option to define the Wave UI root")])),_:1}),t[11]||(t[11]=e(" (Default: ")),t[12]||(t[12]=o("code",{class:"code"},"#app",-1)),t[13]||(t[13]=e(", if not found, ")),t[14]||(t[14]=o("code",{class:"code"},"body",-1)),t[15]||(t[15]=e(").")),o("div",y,[s(a,{language:"html-vue",label:"before",dark:i.$store.state.darkMode,style:{"min-width":"290px"}},{default:n(()=>t[6]||(t[6]=[e(`
8 | My button
9 | `)])),_:1},8,["dark"]),s(r,{class:"ma2 grey",xl:""},{default:n(()=>t[7]||(t[7]=[e("mdi mdi-arrow-right")])),_:1}),s(a,{language:"html-vue",label:"after",dark:i.$store.state.darkMode,style:{"min-width":"290px"}},{default:n(()=>t[8]||(t[8]=[e(`My button
10 | `)])),_:1},8,["dark"])])]),t[16]||(t[16]=w('If you were using useWaveUI in composition API
just replace it with inject('$waveui').
Optionally, if you want to use two themes.
Follow the steps in the themes page.
8 | * @link http://websemantics.ca
9 | * @author Adnan M.Sagar, PhD.
10 | *
11 | * @param {Object} l, the document current location
12 | */
13 | ;(function(l) {
14 | var repo = '/' + l.pathname.split('/')[1]
15 |
16 | /* redirect all 404 trafic to index.html */
17 | function redirect() {
18 | l.replace(l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') + repo + '/?' +
19 | (l.pathname ? 'p=' + l.pathname.replace(/&/g, '~and~').replace(repo, '') : '') +
20 | (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
21 | (l.hash))
22 | }
23 |
24 | /* resolve 404 redirects into internal routes */
25 | function resolve() {
26 | if (l.search) {
27 | var q = {}
28 | l.search.slice(1).split('&').forEach(function(v) {
29 | var a = v.split('=')
30 | q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&')
31 | })
32 | if (q.p !== undefined) {
33 | window.history.replaceState(null, null,
34 | repo + (q.p || '') +
35 | (q.q ? ('?' + q.q) : '') +
36 | l.hash
37 | )
38 | }
39 | }
40 | }
41 |
42 | /* if current document is 404 page page, redirect to index.html otherwise resolve */
43 | document.title === '404' ? redirect() : resolve()
44 | }(window.location))
45 |
--------------------------------------------------------------------------------
/docs/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/docs/images/favicon.png
--------------------------------------------------------------------------------
/docs/images/japanese-wave.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/docs/images/japanese-wave.png
--------------------------------------------------------------------------------
/docs/images/not-found.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/docs/images/not-found.jpg
--------------------------------------------------------------------------------
/docs/images/spirit-island--alberta.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/docs/images/spirit-island--alberta.png
--------------------------------------------------------------------------------
/docs/images/the-great-wave-off--kanagawa.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/docs/images/the-great-wave-off--kanagawa.jpg
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Wave UI
9 |
10 |
11 |
15 | We're sorry but Wave UI doesn't work properly without JavaScript enabled. Please enable it to continue.
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/docs/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow:
3 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Wave UI
9 |
10 |
11 |
12 |
13 | We're sorry but Wave UI doesn't work properly without JavaScript enabled. Please enable it to continue.
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "wave-ui",
3 | "version": "3.21.1",
4 | "description": "A UI framework for Vue.js 3 (and 2) with only the bright side. :sunny:",
5 | "author": "Antoni Andre ",
6 | "homepage": "https://antoniandre.github.io/wave-ui",
7 | "repository": "https://github.com/antoniandre/wave-ui",
8 | "license": "MIT",
9 | "funding": "https://github.com/sponsors/antoniandre",
10 | "main": "./dist/wave-ui.es.js",
11 | "types": "./dist/types/index.d.ts",
12 | "unpkg": "dist/wave-ui.umd.js",
13 | "jsdelivr": "dist/wave-ui.umd.js",
14 | "module": "./dist/wave-ui.es.js",
15 | "files": [
16 | "dist",
17 | "src/wave-ui"
18 | ],
19 | "exports": {
20 | ".": {
21 | "import": "./dist/wave-ui.es.js",
22 | "require": "./dist/wave-ui.umd.js"
23 | },
24 | "./package.json": "./package.json",
25 | "./dist/*": "./dist/*",
26 | "./src/wave-ui": "./src/wave-ui/index.js",
27 | "./src/wave-ui/components": "./src/wave-ui/components/index.js",
28 | "./src/wave-ui/*": "./src/wave-ui/*"
29 | },
30 | "type": "module",
31 | "sideEffects": [
32 | "*.css",
33 | "*.scss",
34 | "*.vue"
35 | ],
36 | "keywords": [
37 | "wave ui",
38 | "ui framework",
39 | "ui library",
40 | "vue ui",
41 | "vue3",
42 | "vue framework",
43 | "ui"
44 | ],
45 | "scripts": {
46 | "dev": "vite",
47 | "build": "vite build --base /wave-ui/",
48 | "build-types": "tsc -p ./tsconfig.json",
49 | "build-bundle": "BUNDLE=true vite build && npm run build-types",
50 | "preview": "vite preview --base /wave-ui/",
51 | "lint": "biome check .",
52 | "lint:fix": "biome check --apply .",
53 | "format": "biome format .",
54 | "format:fix": "biome format --write .",
55 | "publish-doc": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag"
56 | },
57 | "devDependencies": {
58 | "@babel/core": "^7.26.10",
59 | "@biomejs/biome": "^1.9.4",
60 | "@faker-js/faker": "^9.7.0",
61 | "@mdi/font": "^7.4.47",
62 | "@tsconfig/recommended": "^1.0.8",
63 | "@vitejs/plugin-vue": "^5.2.3",
64 | "autoprefixer": "^10.4.21",
65 | "axios": "^1.8.4",
66 | "font-awesome": "^4.7.0",
67 | "globals": "^16.0.0",
68 | "gsap": "^3.12.7",
69 | "ionicons": "^4.6.3",
70 | "material-design-icons": "^3.0.1",
71 | "postcss": "^8.5.3",
72 | "pug": "^3.0.3",
73 | "rollup-plugin-delete": "^3.0.1",
74 | "sass": "^1.86.3",
75 | "simple-syntax-highlighter": "^3.1.1",
76 | "splitpanes": "^4.0.3",
77 | "typescript": "^5.8.3",
78 | "vite": "^6.2.6",
79 | "vite-svg-loader": "^5.1.0",
80 | "vue": "^3.5.13",
81 | "vue-router": "^4.5.0",
82 | "vueperslides": "^3.6.0",
83 | "vuex": "^4.1.0"
84 | },
85 | "peerDependencies": {
86 | "vue": "^3.2.0"
87 | },
88 | "engines": {
89 | "node": ">=16.0.0",
90 | "pnpm": ">=8.0.0"
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export const plugins = {
2 | autoprefixer: {}
3 | }
4 |
--------------------------------------------------------------------------------
/public/.htaccess:
--------------------------------------------------------------------------------
1 | Options +FollowSymlinks
2 | Options -Indexes
3 |
4 | RewriteEngine On
5 | RewriteRule \.(js|css|map|jpe?g|svg|gif|png|eot|ttf|woff2?)(\?.*)?$ - [NC,QSA,L]
6 | RewriteRule .* index.html [NC,QSA,L]
7 |
--------------------------------------------------------------------------------
/public/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 404
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/public/ghspa.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Easy way to enable Single Page Applications for GitHub Pages
3 | *
4 | * This project was released under MIT license.
5 | *
6 | * @link https://github.com/rafrex/spa-github-pages
7 | * @author Rafael Pedicini
8 | * @link http://websemantics.ca
9 | * @author Adnan M.Sagar, PhD.
10 | *
11 | * @param {Object} l, the document current location
12 | */
13 | ;(function(l) {
14 | var repo = '/' + l.pathname.split('/')[1]
15 |
16 | /* redirect all 404 trafic to index.html */
17 | function redirect() {
18 | l.replace(l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') + repo + '/?' +
19 | (l.pathname ? 'p=' + l.pathname.replace(/&/g, '~and~').replace(repo, '') : '') +
20 | (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
21 | (l.hash))
22 | }
23 |
24 | /* resolve 404 redirects into internal routes */
25 | function resolve() {
26 | if (l.search) {
27 | var q = {}
28 | l.search.slice(1).split('&').forEach(function(v) {
29 | var a = v.split('=')
30 | q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&')
31 | })
32 | if (q.p !== undefined) {
33 | window.history.replaceState(null, null,
34 | repo + (q.p || '') +
35 | (q.q ? ('?' + q.q) : '') +
36 | l.hash
37 | )
38 | }
39 | }
40 | }
41 |
42 | /* if current document is 404 page page, redirect to index.html otherwise resolve */
43 | document.title === '404' ? redirect() : resolve()
44 | }(window.location))
45 |
--------------------------------------------------------------------------------
/public/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/public/images/favicon.png
--------------------------------------------------------------------------------
/public/images/japanese-wave.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/public/images/japanese-wave.png
--------------------------------------------------------------------------------
/public/images/not-found.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/public/images/not-found.jpg
--------------------------------------------------------------------------------
/public/images/spirit-island--alberta.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/public/images/spirit-island--alberta.png
--------------------------------------------------------------------------------
/public/images/the-great-wave-off--kanagawa.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/public/images/the-great-wave-off--kanagawa.jpg
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Disallow:
3 |
--------------------------------------------------------------------------------
/src/app.vue:
--------------------------------------------------------------------------------
1 |
2 | router-view.grow(v-if="['home', 'test'].includes($route.name)")
3 | component(v-else is="documentation")
4 |
5 |
6 |
18 |
--------------------------------------------------------------------------------
/src/assets/chrome.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 |
14 |
15 |
--------------------------------------------------------------------------------
/src/assets/fonts/syncopate.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/src/assets/fonts/syncopate.woff
--------------------------------------------------------------------------------
/src/assets/fonts/syncopate.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/src/assets/fonts/syncopate.woff2
--------------------------------------------------------------------------------
/src/assets/japanese-wave.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/src/assets/japanese-wave.png
--------------------------------------------------------------------------------
/src/assets/opera.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
13 |
16 |
--------------------------------------------------------------------------------
/src/assets/vue-cal.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/src/assets/vue-cal.jpg
--------------------------------------------------------------------------------
/src/assets/wave-pattern-dark.svg:
--------------------------------------------------------------------------------
1 |
3 |
2 |
3 |
4 |
47 |
48 |
50 |
--------------------------------------------------------------------------------
/src/assets/wave-ui--dark-theme.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/src/assets/wave-ui--dark-theme.png
--------------------------------------------------------------------------------
/src/assets/wave-ui-mobile-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/src/assets/wave-ui-mobile-1.png
--------------------------------------------------------------------------------
/src/assets/wave-ui-mobile-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniandre/wave-ui/37e94c88f707134d280150e64c3f17048d375c2c/src/assets/wave-ui-mobile-2.png
--------------------------------------------------------------------------------
/src/assets/wave.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/documentation/components/alert.vue:
--------------------------------------------------------------------------------
1 |
2 | w-alert.w-alert--docs(
3 | icon-outside
4 | v-bind="$props"
5 | :class="classes"
6 | :icon="tip ? 'mdi mdi-lightbulb-on' : ''")
7 | slot
8 |
9 |
10 |
29 |
30 |
94 |
--------------------------------------------------------------------------------
/src/documentation/components/example/preference-buttons.vue:
--------------------------------------------------------------------------------
1 |
2 | .w-flex
3 | w-tooltip(left append-to=".w-app")
4 | template(#activator="{ on }")
5 | w-button.mr1.pa0.text-center.justify-center.d-flex(
6 | v-on="on"
7 | @click="tabsView = !tabsView"
8 | round
9 | text
10 | :icon="`mdi ${tabsView ? 'mdi-view-carousel-outline size--lg' : 'mdi-view-sequential'}`"
11 | width="2.3rem"
12 | height="2.3rem"
13 | :color="tabsView ? 'grey-light2' : 'primary'")
14 | | {{ tabsView ? 'Showing the tabs view. Prefer the list view?' : 'Showing the list view. Prefer the tabs view?' }}
15 | w-tooltip(left append-to=".w-app")
16 | template(#activator="{ on }")
17 | w-button.mr1.pa0.text-center.justify-center.d-flex(
18 | v-on="on"
19 | @click="hasPug && (usePug = !usePug)"
20 | round
21 | text
22 | width="2.3rem"
23 | height="2.3rem"
24 | :color="hasPug ? (usePug ? 'brown-light1' : 'grey-light2') : 'grey-light5'")
25 | svg.pug-icon(
26 | width="1.9rem"
27 | height="1.9rem"
28 | viewBox="0 0 512 512")
29 | path(d="M426 123c27 13 88 79 86 84-2 4-31 29-40 38-19 44-36 75-43 41-7 42-22 38-27 58-9 43-34 44-45 52-10 10-25 4-36 10-29 11-97 13-125 1-14-7-21 3-63-25-22-22-15-32-23-47-12-21-17-7-27-55-2 39-23 18-43-35 0 0-38-34-40-38-2-5 59-71 86-84 76-35 256-34 340 0zM296 239c41 14 80 58 74 98 0 21-2 35-5 45 35-23 19-30 33-52 13-23 16-15 23-45-4-31-8-84-13-101-4-13-25-42-38-60-65-25-193-17-226-1-13 18-34 48-39 62-4 15-8 67-12 98 3 30 25 43 29 59 3 25 15 33 31 42-4-10-6-25-6-47-7-47 39-87 76-99 10-27 65-24 73 1zm7 113c0-29-23-53-41-54l1-42c34-3 30-27-4-29-26 0-45 24-4 29v42c-18 0-41 24-41 53 3-29 25-44 46-44 21 1 39 16 43 45zM166 210c0-7-7-11-14-8a9 9 0 1 0 14 8zm-36 46a35 35 0 1 1 35-60 35 35 0 0 1-35 60zm220 0a35 35 0 1 1 36-60 35 35 0 0 1-36 60zm18-46c0-7-8-11-14-8s-6 13 0 16 14-1 14-8z")
30 | template(v-if="hasPug").
31 | Do you prefer the examples source code in Pug?#[br]
32 | The examples will also open in Pug in Codepen.
33 | template(v-else) No Pug yet for this example. Coming soon.
34 |
35 |
36 |
63 |
--------------------------------------------------------------------------------
/src/documentation/components/example/source-code.vue:
--------------------------------------------------------------------------------
1 |
2 | .language
3 | ssh-pre(
4 | v-if="$slots[item.id] !== undefined"
5 | :label="$store.state.tabsView ? '' : item.title"
6 | :language="item.language"
7 | copy-button
8 | @copied="onCopied(item.title)"
9 | :reactive="reactive || ['pug', 'html'].includes(item.id)"
10 | :dark="$store.state.darkMode")
11 | template(#copy-button)
12 | w-icon.ma1(color="primary") mdi mdi-content-copy
13 | slot(:name="item.id")
14 | w-notification.mr6.mt-1(
15 | :model-value="!!showCopied"
16 | transition="slide-fade-left"
17 | plain
18 | absolute
19 | sm
20 | success) {{ showCopied }} code copied to clipboard
21 |
22 |
23 |
43 |
44 |
105 |
--------------------------------------------------------------------------------
/src/documentation/components/issue-link.vue:
--------------------------------------------------------------------------------
1 |
2 | a(:href="`https://github.com/antoniandre/wave-ui/issues/${number}`" target="_blank" v-text="`#${number}`")
3 |
4 |
5 |
16 |
--------------------------------------------------------------------------------
/src/documentation/components/title-link.vue:
--------------------------------------------------------------------------------
1 |
2 | component.title-link(:is="tag" :class="classes")
3 | a(v-if="label" :href="`#${Slug}`")
4 | span.hash #
5 | span(v-html="label")
6 | a(v-else :href="`#${Slug}`")
7 | span.hash #
8 | slot
9 | a(:id="Slug")
10 |
11 |
12 |
63 |
64 |
96 |
--------------------------------------------------------------------------------
/src/documentation/components/ui-component-title.vue:
--------------------------------------------------------------------------------
1 |
2 | .ui-component-title
3 | .w-flex.wrap.align-center
4 | title-link.mt4.mb3(h1 :class="{ code: code && !inProgress }" :slug="slug")
5 | template(v-if="inProgress")
6 | .code
7 | slot
8 | w-tag.ml2(color="orange" outline round) IN PROGRESS
9 | template(v-else-if="deprecated")
10 | .code
11 | slot
12 | w-tag.bd2.ml2(
13 | :bg-color="$waveui.theme === 'dark' ? 'base-color' : 'grey-dark4'"
14 | :color="$waveui.theme === 'dark' ? 'base-color' : 'white'"
15 | round) DEPRECATED
16 | slot(v-else)
17 | w-button.mla.mb3(outline force-link @click="scrollToApi")
18 | w-icon.ml-1.mr1.chevron-down(lg) wi-chevron-down
19 | | Jump to the API
20 |
21 | alert.mt4.mb12(v-if="inProgress" warning).
22 | While a component is in progress, the props, slots and events may change when you upgrade.#[br]
23 | Always keep track in the #[router-link(to="/release-notes") release notes].
24 |
25 |
26 |
42 |
43 |
46 |
--------------------------------------------------------------------------------
/src/documentation/scss/_base.scss:
--------------------------------------------------------------------------------
1 | @use './variables' as *;
2 |
3 | html, body {height: 100%;}
4 |
5 | :root {
6 | --header-waves-pattern: rgba(73, 123, 162, 0.2);
7 | scroll-behavior: smooth;
8 | }
9 |
10 | a {color: $links;}
11 |
12 | ul, ol {margin-left: 4 * $base-increment + 2px;}
13 | .w-list--icon .w-list__item-bullet {color: green;}
14 | .w-list--icon .w-list__item-bullet.wi-minus {color: rgb(213, 117, 0);}
15 |
16 | p {margin-bottom: 2 * $base-increment;}
17 |
18 | .ovh {overflow: hidden;}
19 |
20 | .main-content {
21 | max-width: 100%;
22 | line-height: 1.2;
23 | // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
24 | min-width: 0;
25 | }
26 |
27 | .ssh-pre {
28 | margin: 1em 0;
29 | line-height: 1.3;
30 | font-size: 0.9rem;
31 |
32 | &[data-label] {margin: 2em 0 1em;}
33 | &[data-label]:before {font-weight: bold;}
34 | }
35 |
36 | .nav-menu ~ .main-content {padding-left: 4em;}
37 |
38 | footer {
39 | margin-top: 5em;
40 |
41 | .nav-drawer ~ & {padding-left: 12px;}
42 |
43 | .heart:hover {animation: heartbeat 1s infinite;}
44 | small {font-size: 10px;}
45 | .caption {padding-top: 1px;}
46 | }
47 |
48 | @keyframes heartbeat {
49 | 0%, 30%, 60%, 100% {transform: scale(1);}
50 | 15%, 45% {transform: scale(1.2);}
51 | }
52 |
53 | // Vue Transitions.
54 | // --------------------------------------------------------
55 | .fade-page-enter-active, .fade-page-leave-from-active {transition: opacity 0.12s;}
56 | .fade-page-enter-from, .fade-page-leave-to {opacity: 0;}
57 |
58 | // Media queries.
59 | // --------------------------------------------------------
60 | @media screen and (max-width: 560px) {
61 | button.go-top {display: none;}
62 | }
63 |
64 | // MEDIA QUERIES.
65 | // --------------------------------------------------------
66 | @media screen and (max-width: 600px) {
67 | .title-link .hash {display: none;}
68 | }
69 |
70 | @media screen and (max-width: 450px) {
71 | .w-app .content-wrap {padding-left: 8px;padding-right: 8px;}
72 | .ssh-pre__content {padding-top: 12px;}
73 | .w-app .example {
74 | .ssh-pre__copy {top: -2px;right: -2px;}
75 | .ssh-pre[data-label]:before {top: 5px;}
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/documentation/scss/_header.scss:
--------------------------------------------------------------------------------
1 | header {
2 | margin-top: 42px;
3 | position: relative;
4 | overflow: hidden;
5 |
6 | &:before {
7 | content: '';
8 | position: absolute;
9 | inset: 0;
10 | background: url('@/assets/japanese-wave.png') repeat-x 0 5px;
11 | z-index: 1;
12 | }
13 |
14 | &:after {
15 | content: '';
16 | position: absolute;
17 | inset: 100% 0 auto;
18 | height: 30px;
19 | box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.4);
20 | }
21 |
22 | svg {
23 | position: absolute;
24 | top: 0;
25 | left: 0;
26 | }
27 | }
28 |
29 | @media screen and (min-width: 1500px) {
30 | header {height: 300px;}
31 | header:before {background-size: 1400px;}
32 | }
33 |
34 | @media screen and (min-width: 1281px) and (max-width: 1500px) {
35 | header {height: 280px;}
36 | header:before {
37 | display: block;
38 | position: relative;
39 | padding-bottom: 23.34%;
40 | background-size: contain;
41 | }
42 | }
43 |
44 | @media screen and (min-width: 1021px) and (max-width: 1280px) {
45 | header {height: 238px;}
46 | header:before {
47 | display: block;
48 | position: relative;
49 | padding-bottom: 23.34%;
50 | background-size: contain;
51 | }
52 | }
53 |
54 | @media screen and (min-width: 601px) and (max-width: 1020px) {
55 | header {height: 180px;}
56 | header:before {background-size: 800px;}
57 | }
58 |
59 | @media screen and (max-width: 600px) {
60 | header {height: 135px;}
61 | header:before {background-size: 600px;}
62 | }
63 |
64 | // For iOS: https://stackoverflow.com/a/23420490/2012407, https://stackoverflow.com/a/47818418/2012407.
65 | @supports (-webkit-touch-callout: none) {
66 | header {background-attachment: scroll;}
67 | }
68 |
--------------------------------------------------------------------------------
/src/documentation/scss/_typography.scss:
--------------------------------------------------------------------------------
1 | @use './variables' as *;
2 |
3 | @font-face {
4 | font-family: 'title font';
5 | src: url('@/assets/fonts/syncopate.woff2') format('woff2'),
6 | url('@/assets/fonts/syncopate.woff') format('woff');
7 | font-weight: normal;
8 | font-style: normal;
9 | }
10 |
11 | html {
12 | font-size: $base-font-size;
13 | font-family: Helvetica, Arial, sans-serif;
14 | -webkit-font-smoothing: antialiased;
15 | -moz-osx-font-smoothing: grayscale;
16 | }
17 |
18 | h1 {
19 | color: $primary;
20 | margin-top: 6 * $base-increment;
21 | margin-bottom: 2 * $base-increment;
22 | font-size: 2rem;
23 | font-weight: 400;
24 | }
25 | .w-app h1.headline {margin-bottom: 30px;}
26 |
27 | h2 {
28 | color: $primary;
29 | margin-top: 12 * $base-increment;
30 | margin-bottom: 3 * $base-increment;
31 | font-size: 1.6rem;
32 | font-weight: 400;
33 | }
34 |
35 | h3 {
36 | margin-top: 6 * $base-increment;
37 | margin-bottom: 2 * $base-increment;
38 | font-size: 1.25rem;
39 | font-weight: 400;
40 | }
41 |
42 | h4 {font-size: 1rem;}
43 |
44 | .headline {
45 | margin-top: 10 * $base-increment;
46 | margin-bottom: 5 * $base-increment;
47 | }
48 |
49 | .title2 {
50 | margin-top: 4 * $base-increment;
51 | margin-bottom: 2 * $base-increment;
52 | }
53 |
54 | .title3 {margin-bottom: 2 * $base-increment;}
55 |
56 | .title4 {margin-bottom: 2 * $base-increment;}
57 |
58 | .title5 {margin-bottom: 2 * $base-increment;}
59 |
60 | code, .code, kbd {
61 | display: inline-block;
62 | font-family: monospace;
63 | }
64 |
65 | code {
66 | padding: 1px 4px;
67 | background-color: rgba(130, 130, 130, 0.1);
68 | border: 1px solid rgba(0, 0, 0, 0.05);
69 | border-radius: $border-radius;
70 | color: #2a4459;
71 | font-size: 0.9em;
72 | }
73 |
74 | .code {color: #000;}
75 |
76 | kbd {
77 | padding: 1px 5px 2px;
78 | background-color: rgba(130, 130, 130, 0.1);
79 | border: 1px solid rgba(0, 0, 0, 0.08);
80 | border-radius: $border-radius;
81 | color: rgba(0, 0, 0, 0.55);
82 | box-shadow: inset -1px -1px 1px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 1);
83 | }
84 |
--------------------------------------------------------------------------------
/src/documentation/scss/_variables.scss:
--------------------------------------------------------------------------------
1 | @forward '@/wave-ui/scss/variables';
2 |
3 | $links: #09c;
4 | $theme-switch-transition: 0.4s;
5 |
6 | @mixin theme-switch-transition() {
7 | transition: color $theme-switch-transition,
8 | background-color $theme-switch-transition,
9 | border-color $theme-switch-transition,
10 | stroke $theme-switch-transition,
11 | fill $theme-switch-transition;
12 | }
13 |
14 | // Override Wave UI's SCSS defaults.
15 | // $base-font-size: 14px;
16 | // $box-shadow: 0 3px 1px -2px rgba(#000, 0.5),
17 | // 0 2px 2px 0 rgba(#000, 0.5),
18 | // 0 1px 5px 0 rgba(#000, 0.5);
19 |
--------------------------------------------------------------------------------
/src/documentation/scss/index.scss:
--------------------------------------------------------------------------------
1 | @forward './base';
2 | @forward './dark-theme'; // Can't import conditionally.
3 | @forward './typography';
4 | @forward './header';
5 |
--------------------------------------------------------------------------------
/src/documentation/views/404.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | title-link.mt4(h1) 404 - Not found
4 | p The page you are looking for was not found on the server.
5 |
6 |
--------------------------------------------------------------------------------
/src/documentation/views/browser-support.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | title-link.mt4(h1) Browser support
4 | title-link(h2) All major browsers supported
5 | p Wave UI supports:
6 | w-list.ml-1(:items="listItems" icon="wi-check")
7 | template(#item="{ item: { label } }")
8 | img(:src="getImageUrl(label)")
9 | span {{ label }}
10 |
11 | title-link(h2) Dropping support for IE11
12 | a.title4(href="https://gs.statcounter.com/browser-market-share" target="_blank")
13 | span IE's current market share is less than 0.43% worldwide (gs.statcounter.com)
14 | w-icon.ml2(md) mdi mdi-open-in-new
15 |
16 | p.size--md.
17 | Many popular websites have officially drop support for IE including Youtube, GitHub, Meetup, Slack, Zendesk,
18 | Trello, Atlassian, Discord, Spotify, Behance, Wix, Huddle, WhatsApp, Google Earth and Yahoo.
19 | Even some of Microsoft’s own product’s, like Teams, have severely reduced support for IE.
20 |
21 | .title4.mt8 The distance between Internet Explorer 11 (year 2015) and every other major browser is huge.
22 | p.mt0.
23 | Adding support for this technologically obsolete browser considerably increases the development time
24 | and #[strong adding IE11 hacks and workarounds penalizes all the other browser users (more than 99.57%)].
25 |
26 | p IE11 now only exists to support the sites that use it until they’re modernized.
27 |
28 | p
29 | strong The web has moved on.
30 |
31 |
32 |
51 |
52 |
64 |
--------------------------------------------------------------------------------
/src/documentation/views/getting-started/install-cdn.vue:
--------------------------------------------------------------------------------
1 |
2 | p This is the fastest way to get started.
3 | ol
4 | li.mt8
5 | | Add this <script> tag in your app at the end of the <head> tag.
6 | ssh-pre(language="html" :dark="$store.state.darkMode").
7 | <link rel="stylesheet" href="https://unpkg.com/wave-ui/dist/wave-ui.css"></link>
8 | p Or for Vue 2.x:
9 | ssh-pre(language="html" :dark="$store.state.darkMode").
10 | <link rel="stylesheet" href="https://unpkg.com/wave-ui@legacy/dist/wave-ui.css"></link>
11 | p.grey #[strong Note:] Wave UI is also on #[a(href="https://www.jsdelivr.com/package/npm/wave-ui" target="_blank") JSDelivr].
12 | li.mt8
13 | | Add this <script> tag in your app at the end of the <body> tag and after the Vue.js script.
14 | ssh-pre(language="html" :dark="$store.state.darkMode").
15 | <script src="https://unpkg.com/wave-ui"></script>
16 | p Or for Vue 2.x:
17 | ssh-pre(language="html" :dark="$store.state.darkMode").
18 | <script src="https://unpkg.com/wave-ui@legacy"></script>
19 | li.mt8
20 | p Initialize Wave UI.
21 | w-tabs.mt4(:items="2" content-class="pa0")
22 | template(#item-title.1) Vue 3
23 | template(#item-content.1)
24 | ssh-pre.my0(
25 | language="js"
26 | :dark="$store.state.darkMode").
27 | const app = Vue.createApp()
28 | app.use(WaveUI, { /* Some Wave UI options */ })
29 | app.mount('#app')
30 |
31 | p.my3.ml2.grey-light1
32 | w-icon.mr1 wi-chevron-right
33 | | Edit a
34 | a.ml1(href="https://codepen.io/antoniandre/pen/RwaXMLd?editors=1010" target="_blank")
35 | | #[strong Vue 3] Wave UI demo on Codepen
36 | w-icon.ml1 mdi mdi-open-in-new
37 | | .
38 |
39 | template(#item-title.2) Vue 2
40 | template(#item-content.2)
41 | ssh-pre.my0(
42 | language="js"
43 | :dark="$store.state.darkMode").
44 | new Vue({
45 | waveui: new WaveUI({ /* Some Wave UI options */ })
46 | }).$mount('#app')
47 |
48 | p.my3.ml2.grey-light1
49 | w-icon.mr1 wi-chevron-right
50 | | Edit a
51 | a.ml1(href="https://codepen.io/antoniandre/pen/KKyoKrZ?editors=1010" target="_blank")
52 | | #[strong Vue 2] Wave UI demo on Codepen
53 | w-icon.ml1 mdi mdi-open-in-new
54 | | .
55 |
56 |
--------------------------------------------------------------------------------
/src/documentation/views/layout-other-css-classes.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | title-link.mt4(h1) Other useful CSS classes
4 |
5 | p.
6 | In addition to the CSS classes listed in this layout section, here are a few other
7 | CSS classes related to the display.
8 |
9 | title-link(h2) Display
10 | ul.mt4
11 | li
12 | code.mr2 .show
13 | | Shows an element using the #[span.code display: block] property.#[br]
14 | | But elements are visible by default. ;)
15 | li
16 | code.mr2 .hide
17 | | Hides an element using the #[span.code display: none] property.
18 | li.mt1
19 | code.mr2 .d-block
20 | | Applies the #[span.code display: block] property.
21 | li.mt1
22 | code.mr2 .d-iblock
23 | | Applies the #[span.code display: inline-block] property.
24 | li.mt1
25 | code.mr2 .d-flex
26 | | Applies the #[span.code display: flex] property.
27 | li.mt1
28 | code.mr2 .d-iflex
29 | | Applies the #[span.code display: inline-flex] property.
30 |
31 | alert(tip)
32 | | In general, it's always useful to look into the source code by yourself to understand what it
33 | | does: you can find all the layout classes in the
34 | a.ml1(
35 | href="https://github.com/antoniandre/wave-ui/blob/master/src/wave-ui/scss/_layout.scss"
36 | target="_blank")
37 | | layout.scss
38 | w-icon.mx1(sm) mdi mdi-open-in-new
39 | | file.
40 |
41 |
--------------------------------------------------------------------------------
/src/documentation/views/migration-from-v2-to-v3.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | title-link.mt4(h1) Migration strategy from version 2.x to version 3.x
4 |
5 | p.
6 | The migration from Wave UI 2.x is extremely simple. You'll be done in two steps, two minutes!#[br]
7 | But if you want to offer two themes in your app, there's a bit more work.
8 | ol.mt6
9 | li.mt4
10 | .title3 Update the initialization of Wave UI.
11 | .w-flex.align-center
12 | ssh-pre(
13 | language="js"
14 | label="before"
15 | :dark="$store.state.darkMode"
16 | style="min-width: 290px").
17 | const app = createApp(App)
18 | new WaveUI(app, { /* Some Wave UI options */ })
19 | app.mount('#app')
20 | w-icon.ma2.grey(xl) mdi mdi-arrow-right
21 | ssh-pre(
22 | language="js"
23 | label="after"
24 | :dark="$store.state.darkMode"
25 | style="min-width: 290px").
26 | const app = createApp(App)
27 | app.use(WaveUI, { /* Some Wave UI options */ })
28 | app.mount('#app')
29 |
30 | li.mt4
31 | .title3 Remove the <w-app> component, it's no longer needed!#[br]
32 | | Note: there is also an #[router-link(to="/options-presets-and-waveui") option to define the Wave UI root] (Default: #[code.code #app], if not found, #[code.code body]).
33 | .w-flex.align-center
34 | ssh-pre(
35 | language="html-vue"
36 | label="before"
37 | :dark="$store.state.darkMode"
38 | style="min-width: 290px").
39 | <w-app>
40 | <w-button>My button</w-button>
41 | </w-app>
42 | w-icon.ma2.grey(xl) mdi mdi-arrow-right
43 | ssh-pre(
44 | language="html-vue"
45 | label="after"
46 | :dark="$store.state.darkMode"
47 | style="min-width: 290px").
48 | <w-button>My button</w-button>
49 |
50 | li.mt4
51 | .title3 If you were using #[code useWaveUI] in composition API
52 | p just replace it with #[code inject('$waveui')].
53 |
54 | li.mt4
55 | .title3 Optionally, if you want to use two themes.
56 | p Follow the steps in the #[a(href="/themes#adding-themes-in-your-wave-ui-app") themes] page.
57 |
58 |
59 |
60 |
64 |
65 |
67 |
--------------------------------------------------------------------------------
/src/documentation/views/test.vue:
--------------------------------------------------------------------------------
1 |
2 | .test.ma12.pa12.bd1.bdrs2
3 | h1.mt0.mb8 Testing playground
4 | w-input(@update:model-value="onMessageUpdate" :model-value="message")
5 | p model-value: {{ message }}
6 |
7 | w-input(@update:model-value="onCountUpdate" :model-value="count" type="number")
8 | p model-value: {{ count }}
9 |
10 |
11 |
27 |
28 |
31 |
--------------------------------------------------------------------------------
/src/documentation/views/typography.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | title-link.mt4(h1) Typography
4 | p Here is a list of classes that will help you structure and emphasize your content.
5 |
6 | title-link(h2) Content architecture
7 | div.ml8
8 | .headline.mt6 Headline using the #[code .headline] class or #[code .title1].
9 | .title2.mt4 Title using the #[code .title2] class.
10 | .title3.mt4 Subtitle using the #[code .title3] class.
11 | .title4.mt4 Heading using the #[code .title4] class.
12 | .title5.mt4 Subheading using the #[code .title5] class.
13 | .body.mt4 Body text using the #[code .body] class.
14 | .caption.mt4 Caption text using the #[code .caption] class.
15 |
16 | title-link(h2) Other text sizes
17 | p.caption The following size classes can be applied to text as well as most of Wave UI elements.
18 | .size--xs This text is using the #[code .size--xs] class.
19 | .size--sm This text is using the #[code .size--sm] class.
20 | .size--md This text is using the #[code .size--md] class.
21 | .size--lg This text is using the #[code .size--lg] class.
22 | .size--xl This text is using the #[code .size--xl] class.
23 |
24 | title-link(h2) Text style
25 | div.ml8
26 | .text-upper.mt4 Uppercase text using the #[code .text-upper] class.
27 | .text-lower.mt4 Lowercase text using the #[code .text-lower] class.
28 | .text-capitalize.mt4 Capitalize text (first letter of each word) using the #[code .text-capitalize] class.
29 | .text-bold.mt4 Bold text using the #[code .text-bold] class.
30 | .text-light.mt4 Normal (not bold) text using the #[code .text-light] class.
31 | .text-italic.mt4 Italic text using the #[code .text-italic] class.
32 |
33 | title-link(h2) Text alignment
34 | div.ml8
35 | .text-left.mt4 Left aligned text using the #[code .text-left] class.
36 | .text-center.mt4 Center aligned text using the #[code .text-center] class.
37 | .text-right.mt4 Right aligned text using the #[code .text-right] class.
38 |
39 | title-link(h2) Line heights
40 | div.ml8
41 | .lh0.mt6 Apply a smaller line height of #[span.code 1]#[br]using the #[code.py0.bd0 .lh0] class.
42 | .lh1.mt6 Apply a normal line height of #[span.code 1.2]#[br]using the #[code.py0.bd0 .lh1] class.
43 | .lh2.mt6 Apply a line height of #[span.code 1.4]#[br]using the #[code.py0.bd0 .lh2] class.
44 | .lh3.mt6 Apply a line height of #[span.code 1.6]#[br]using the #[code.py0.bd0 .lh3] class.
45 | .lh4.mt6 Apply a line height of #[span.code 1.8]#[br]using the #[code.py0.bd0 .lh4] class.
46 | .lh5.mt6 Apply a line height of #[span.code 2]#[br]using the #[code.py0.bd0 .lh5] class.
47 |
48 |
49 |
53 |
54 |
63 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/accordion/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-accordion
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/alert/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-alert
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/app/api.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | .w-divider.my12
4 | title-link.title1(h2) API
5 |
6 | component-api.mt0(:items="props" :descriptions="propsDescs" title="Props")
7 |
8 | component-api(:items="slots" title="Slots")
9 |
10 | component-api(:items="events" title="Events")
11 |
12 |
13 |
57 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/app/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title(slug="w-app" deprecated) w-app
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/autocomplete/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title(slug="w-autocomplete" in-progress) w-autocomplete
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/badge/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-badge
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/breadcrumbs/api.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | .w-divider.my12
4 | title-link.title1(h2) API
5 |
6 | component-api.mt0(:items="props" :descriptions="propsDescs" title="Props")
7 |
8 | component-api(:items="slots" title="Slots")
9 |
10 | component-api(:items="events" title="Events")
11 |
12 |
13 |
71 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/breadcrumbs/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title(slug="w-breadcrumbs") w-breadcrumbs
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/button/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-button
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/calendar.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | title-link.mt4(h1) Calendar
4 |
5 | p
6 | | The work is already done in this library! Check out
7 | a.mx1(href="https://github.com/antoniandre/vue-cal" target="_blank") Vue Cal
8 | | by the same awesome author! ;)
9 |
10 | .w-flex.align-center.wrap.mt8
11 | w-icon.grey-light4.ml-2.mr2(xl) mdi mdi-chevron-right
12 | a.title2.mr2.my0(href="https://antoniandre.github.io/vue-cal" target="_blank") Vue Cal
13 | div.my2
14 | a.mr1(href="https://www.npmjs.com/package/vue-cal" target="_blank")
15 | img.mb-1(src="https://img.shields.io/npm/dt/vue-cal.svg")
16 | a(href="https://www.npmjs.com/package/vue-cal" target="_blank")
17 | img.mb-1(src="https://img.shields.io/npm/dw/vue-cal.svg")
18 |
19 | ssh-pre.mt6(language="shell" :dark="$store.state.darkMode") npm i vue-cal
20 |
21 | img.mt6(src="@/assets/vue-cal.jpg" alt="Vue Cal")
22 |
23 |
24 |
27 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/card/api.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | .w-divider.my12
4 | title-link.title1(h2) API
5 |
6 | component-api.mt0(:items="props" :descriptions="propsDescs" title="Props")
7 |
8 | component-api(:items="slots" title="Slots")
9 |
10 | component-api(:items="events" title="Events")
11 |
12 |
13 |
56 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/card/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-card
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/checkbox/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title(slug="w-checkbox-and-w-checkboxes" :code="false")
4 | | #[span.code w-checkbox] & #[span.code w-checkboxes]
5 |
6 | examples
7 | api
8 |
9 |
10 |
18 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/confirm/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-confirm
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/date-picker/api.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | .w-divider.my12
4 | title-link.title1(h2) API
5 | alert.mb6(info) The missing props descriptions will be added shortly (all the props are already listed).
6 |
7 | component-api.mt0(:items="props" :descriptions="propsDescs" title="Props")
8 |
9 | component-api(:items="slots" title="Slots")
10 |
11 | component-api(:items="events" title="Events")
12 |
13 |
14 |
44 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/date-picker/examples.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | title-link(h2) Default
4 | example
5 | template(#pug).
6 |
7 |
8 |
13 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/date-picker/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title(slug="w-date-picker" in-progress) w-date-picker
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/dialog/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-dialog
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/divider/api.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | .w-divider.my12
4 | title-link.title1(h2) API
5 |
6 | component-api.mt0(:items="props" :descriptions="propsDescs" title="Props")
7 |
8 | component-api(:items="slots" title="Slots")
9 |
10 | component-api(:items="events" title="Events")
11 |
12 |
13 |
48 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/divider/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-divider
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/drawer/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-drawer
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/form/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-form
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/icon/api.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | .w-divider.my12
4 | title-link.title1(h2) API
5 |
6 | component-api.mt0(:items="props" :descriptions="propsDescs" title="Props")
7 |
8 | component-api(:items="slots" title="Slots")
9 |
10 | component-api(:items="events" title="Events")
11 |
12 |
13 |
66 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/icon/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-icon
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/image/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title(slug="w-image") w-image
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/input/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-input
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/list/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-list
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/list/item.vue:
--------------------------------------------------------------------------------
1 |
2 | w-card(bg-color="blue-light5" title="Nested <router-view>" title-class="title3")
3 | .title1 Selected list item: {{ item }}
4 |
5 |
6 |
11 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/menu/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-menu
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/notification/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title(:code="false" slug="notification-manager-and-w-notification")
4 | | Built-in notification manager & #[span.code w-notification]
5 | examples
6 | api
7 |
8 |
9 |
17 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/overlay/api.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | .w-divider.my12
4 | title-link.title1(h2) API
5 |
6 | component-api.mt0(:items="props" :descriptions="propsDescs" title="Props")
7 |
8 | component-api(:items="slots" title="Slots")
9 |
10 | component-api(:items="events" title="Events")
11 |
12 |
13 |
75 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/overlay/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-overlay
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/parallax/api.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | .w-divider.my12
4 | title-link.title1(h2) API
5 | alert.mb6(info) The missing props descriptions will be added shortly (all the props are already listed).
6 |
7 | component-api.mt0(:items="props" :descriptions="propsDescs" title="Props")
8 |
9 | component-api(:items="slots" title="Slots")
10 |
11 | component-api(:items="events" title="Events")
12 |
13 |
14 |
41 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/parallax/examples.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | title-link(h2) Default
4 | example
5 | template(#pug).
6 |
7 |
8 |
13 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/parallax/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title(slug="w-parallax" in-progress) w-parallax
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/progress/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-progress
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/radio/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title(slug="w-radio-and-w-radios" :code="false")
4 | | #[span.code w-radio] & #[span.code w-radios]
5 | examples
6 | api
7 |
8 |
9 |
17 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/rating/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title(slug="w-rating") w-rating
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/scrollable/api.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | .w-divider.my12
4 | title-link.title1(h2) API
5 | alert.mb6(info) The missing props descriptions will be added shortly (all the props are already listed).
6 |
7 | component-api.mt0(:items="props" :descriptions="propsDescs" title="Props")
8 |
9 | component-api(:items="slots" title="Slots")
10 |
11 | component-api(:items="events" title="Events")
12 |
13 |
14 |
44 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/scrollable/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title(slug="w-scrollable" in-progress) w-scrollable
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/select/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-select
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/slider/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-slider
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/spinner/api.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | .w-divider.my12
4 | title-link.title1(h2) API
5 |
6 | component-api.mt0(:items="props" :descriptions="propsDescs" title="Props")
7 |
8 | component-api(:items="slots" title="Slots")
9 |
10 | component-api(:items="events" title="Events")
11 |
12 |
13 |
51 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/spinner/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-spinner
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/splitter.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | title-link.mt4(h1) Splitter
4 |
5 | p
6 | | The work is already done in this library! Check out
7 | a.mx1(href="https://antoniandre.github.io/splitpanes" target="_blank") Splitpanes
8 | | by the same awesome author! ;)
9 |
10 | .w-flex.align-center.wrap.mt8
11 | w-icon.grey-light4.ml-2.mr2(xl) mdi mdi-chevron-right
12 | a.title2.my0.mr2(href="https://antoniandre.github.io/splitpanes" target="_blank") Splitpanes
13 | a.my2.mr1(href="https://www.npmjs.com/package/splitpanes" target="_blank")
14 | img.mb-1(src="https://img.shields.io/npm/dt/splitpanes.svg")
15 | a.my2(href="https://www.npmjs.com/package/splitpanes" target="_blank")
16 | img.mb-1(src="https://img.shields.io/npm/dw/splitpanes.svg")
17 |
18 | ssh-pre.mt6(language="shell" :dark="$store.state.darkMode") npm i splitpanes
19 |
20 | splitpanes.default-theme.mt8
21 | pane(min-size="20")
22 | span 1
23 | em.specs I have a min width of 20%
24 | pane
25 | splitpanes.default-theme(horizontal)
26 | pane(min-size="15")
27 | span 2
28 | em.specs I have a min height of 15%
29 | pane
30 | span 3
31 | pane
32 | span 4
33 | pane
34 | span 5
35 |
36 | title-link(h2) Features
37 | w-list(:items="listItems" icon="wi-check")
38 |
39 |
40 |
62 |
63 |
89 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/steps/api.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | .w-divider.my12
4 | title-link.title1(h2) API
5 | alert.mb6(info) The missing props descriptions will be added shortly (all the props are already listed).
6 |
7 | component-api.mt0(:items="props" :descriptions="propsDescs" title="Props")
8 |
9 | component-api(:items="slots" title="Slots")
10 |
11 | component-api(:items="events" title="Events")
12 |
13 |
14 |
44 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/steps/examples.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | title-link(h2) Default
4 | example
5 | template(#pug).
6 |
7 |
8 |
13 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/steps/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title(slug="w-steps" in-progress) w-steps
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/switch/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-switch
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/table/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-table
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/tabs/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-tabs
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/tag/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-tag
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/textarea/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-textarea
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/timeline/api.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | .w-divider.my12
4 | title-link.title1(h2) API
5 |
6 | component-api.mt0(:items="props" :descriptions="propsDescs" title="Props")
7 |
8 | component-api(:items="slots" title="Slots")
9 |
10 | component-api(:items="events" title="Events")
11 |
12 |
13 |
66 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/timeline/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-timeline
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/toolbar/api.vue:
--------------------------------------------------------------------------------
1 |
2 | div
3 | .w-divider.my12
4 | title-link.title1(h2) API
5 |
6 | component-api.mt0(:items="props" :descriptions="propsDescs" title="Props")
7 |
8 | component-api(:items="slots" title="Slots")
9 |
10 | component-api(:items="events" title="Events")
11 |
12 |
13 |
53 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/toolbar/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-toolbar
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/tooltip/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title w-tooltip
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/documentation/views/ui-components/tree/index.vue:
--------------------------------------------------------------------------------
1 |
2 | main
3 | ui-component-title(slug="w-tree") w-tree
4 | examples
5 | api
6 |
7 |
8 |
16 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './app.vue'
3 | import router from './router'
4 | import store from './store'
5 | import WaveUI from '@/wave-ui/index'
6 | import '@mdi/font/css/materialdesignicons.min.css'
7 |
8 | import SshPre from 'simple-syntax-highlighter'
9 | import 'simple-syntax-highlighter/dist/sshpre.css'
10 | import TitleLink from '@/documentation/components/title-link.vue'
11 | import IssueLink from '@/documentation/components/issue-link.vue'
12 | import UiComponentTitle from '@/documentation/components/ui-component-title.vue'
13 | import Example from '@/documentation/components/example/index.vue'
14 | import Alert from '@/documentation/components/alert.vue'
15 | import Api from '@/documentation/components/api.vue'
16 |
17 | const app = createApp(App)
18 | app
19 | .use(router)
20 | .use(store)
21 | .use(WaveUI, {
22 | on: '#app',
23 | colors: {
24 | dark: {
25 | primary: '#7fb0cf'
26 | }
27 | },
28 | theme: 'auto'
29 | })
30 |
31 | app.component('ssh-pre', SshPre)
32 | app.component('title-link', TitleLink)
33 | app.component('ui-component-title', UiComponentTitle)
34 | app.component('example', Example)
35 | app.component('alert', Alert)
36 | app.component('component-api', Api) // The `api` keyword in template crashes Vue 3.
37 | app.component('issue-link', IssueLink)
38 |
39 | app.mount('#app')
40 |
--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
1 | import { createStore } from 'vuex'
2 |
3 | export default createStore({
4 | state: () => ({
5 | currentPage: '', // The title of the page, to pass to Codepen from examples.
6 | usePug: false,
7 | tabsView: true,
8 | darkMode: false
9 | }),
10 |
11 | mutations: {
12 | setDarkMode(state, bool) {
13 | state.darkMode = bool
14 | localStorage.darkMode = bool
15 | },
16 | setCurrentPage(state, pageTitle) {
17 | state.currentPage = pageTitle
18 | },
19 | initUsePug(state) {
20 | state.usePug = !!Number.parseInt(localStorage.getItem('usePug'))
21 | },
22 | setUsePug(state, usePug) {
23 | if (state.usePug !== usePug) {
24 | state.usePug = usePug
25 | localStorage.setItem('usePug', +usePug)
26 | }
27 | },
28 | initTabsView(state) {
29 | state.tabsView = !!Number.parseInt(localStorage.getItem('tabsView'))
30 | },
31 | setTabsView(state, tabsView) {
32 | if (state.tabsView !== tabsView) {
33 | state.tabsView = tabsView
34 | localStorage.setItem('tabsView', +tabsView)
35 | }
36 | }
37 | },
38 |
39 | actions: {
40 | detectDarkMode({ commit }) {
41 | // Detect the dark mode preference.
42 | const darkMode = window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches
43 |
44 | commit('setDarkMode', darkMode)
45 | return darkMode
46 | }
47 | }
48 | })
49 |
--------------------------------------------------------------------------------
/src/types/components/WGrid.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-vars */
2 | /* eslint-disable @typescript-eslint/no-explicit-any */
3 | /* eslint-disable @typescript-eslint/ban-types */
4 | import type {
5 | ComputedGetter,
6 | ComputedOptions,
7 | DefineComponent,
8 | EmitsOptions,
9 | ExtractDefaultPropTypes,
10 | MethodOptions,
11 | SlotsType
12 | } from 'vue'
13 |
14 | import type {
15 | PublicProps,
16 | ResolveProps
17 | } from '../extra-vue-types'
18 |
19 | // ----------------------------------------------------------------------------
20 | // Props
21 | // ----------------------------------------------------------------------------
22 | export interface WaveGridProps {
23 | /**
24 | * TODO: Add Description
25 | * @property {string} tag - Default: 'div'
26 | * @see https://antoniandre.github.io/wave-ui/w-grid
27 | */
28 | tag?: string
29 |
30 | /**
31 | * TODO: Add Description
32 | * @property {number|{}|string} columns
33 | * @see https://antoniandre.github.io/wave-ui/w-grid
34 | */
35 | columns?: number|{}|string
36 |
37 | /**
38 | * TODO: Add Description
39 | * @property {number|{}|string} gap - Default: 0
40 | * @see https://antoniandre.github.io/wave-ui/w-grid
41 | */
42 | gap?: number|{}|string
43 | }
44 |
45 | // ----------------------------------------------------------------------------
46 | // Emits
47 | // ----------------------------------------------------------------------------
48 | export type WaveGridEmits = {}
49 |
50 | // ----------------------------------------------------------------------------
51 | // Computeds
52 | // ----------------------------------------------------------------------------
53 | export interface WaveGridComputeds extends ComputedOptions {
54 | /**
55 | * TODO: Add Description
56 | * @see https://antoniandre.github.io/wave-ui/w-grid
57 | */
58 | breakpointsColumns: ComputedGetter
59 |
60 | /**
61 | * TODO: Add Description
62 | * @see https://antoniandre.github.io/wave-ui/w-grid
63 | */
64 | breakpointsGap: ComputedGetter
65 |
66 | /**
67 | * TODO: Add Description
68 | * @see https://antoniandre.github.io/wave-ui/w-grid
69 | */
70 | classes: ComputedGetter
71 | }
72 |
73 | // ----------------------------------------------------------------------------
74 | // Methods
75 | // ----------------------------------------------------------------------------
76 | export interface WaveGridMethods extends MethodOptions {
77 | }
78 |
79 | // ----------------------------------------------------------------------------
80 | // Slots
81 | // ----------------------------------------------------------------------------
82 | export type WaveGridSlots = SlotsType<{
83 | /**
84 | * TODO: Add Description
85 | * @see https://antoniandre.github.io/wave-ui/w-grid
86 | */
87 | 'default': () => any
88 | }>
89 |
90 | // ----------------------------------------------------------------------------
91 | // Component
92 | // ----------------------------------------------------------------------------
93 | export type WGrid = DefineComponent<
94 | WaveGridProps,
95 | {},
96 | {},
97 | WaveGridComputeds,
98 | WaveGridMethods,
99 | {},
100 | {},
101 | WaveGridEmits & EmitsOptions,
102 | string,
103 | PublicProps,
104 | ResolveProps,
105 | ExtractDefaultPropTypes,
106 | WaveGridSlots
107 | >
108 |
--------------------------------------------------------------------------------
/src/types/components/WNotificationManager.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-vars */
2 | /* eslint-disable @typescript-eslint/no-explicit-any */
3 | /* eslint-disable @typescript-eslint/ban-types */
4 | import type {
5 | ComputedGetter,
6 | ComputedOptions,
7 | DefineComponent,
8 | EmitsOptions,
9 | ExtractDefaultPropTypes,
10 | MethodOptions,
11 | SlotsType
12 | } from 'vue'
13 |
14 | import type {
15 | PublicProps,
16 | ResolveProps
17 | } from '../extra-vue-types'
18 |
19 | // ----------------------------------------------------------------------------
20 | // Props
21 | // ----------------------------------------------------------------------------
22 | export type WaveNotificationManagerProps = {}
23 |
24 | // ----------------------------------------------------------------------------
25 | // Emits
26 | // ----------------------------------------------------------------------------
27 | export type WaveNotificationManagerEmits = {}
28 |
29 | // ----------------------------------------------------------------------------
30 | // Computeds
31 | // ----------------------------------------------------------------------------
32 | export interface WaveNotificationManagerComputeds extends ComputedOptions {
33 | /**
34 | * TODO: Add Description
35 | * @see https://antoniandre.github.io/wave-ui/w-notification-manager
36 | */
37 | conf: ComputedGetter
38 |
39 | /**
40 | * TODO: Add Description
41 | * @see https://antoniandre.github.io/wave-ui/w-notification-manager
42 | */
43 | notifications: ComputedGetter
44 |
45 | /**
46 | * TODO: Add Description
47 | * @see https://antoniandre.github.io/wave-ui/w-notification-manager
48 | */
49 | transition: ComputedGetter
50 | }
51 |
52 | // ----------------------------------------------------------------------------
53 | // Methods
54 | // ----------------------------------------------------------------------------
55 | export interface WaveNotificationManagerMethods extends MethodOptions {
56 | /**
57 | * TODO: Add Description
58 | * @param {any} notif
59 | * @see https://antoniandre.github.io/wave-ui/w-notification-manager
60 | */
61 | notifProps(notif: any): void
62 | }
63 |
64 | // ----------------------------------------------------------------------------
65 | // Slots
66 | // ----------------------------------------------------------------------------
67 | export type WaveNotificationManagerSlots = SlotsType<{
68 | }>
69 |
70 | // ----------------------------------------------------------------------------
71 | // Component
72 | // ----------------------------------------------------------------------------
73 | export type WNotificationManager = DefineComponent<
74 | WaveNotificationManagerProps,
75 | {},
76 | {},
77 | WaveNotificationManagerComputeds,
78 | WaveNotificationManagerMethods,
79 | {},
80 | {},
81 | WaveNotificationManagerEmits & EmitsOptions,
82 | string,
83 | PublicProps,
84 | ResolveProps,
85 | ExtractDefaultPropTypes,
86 | WaveNotificationManagerSlots
87 | >
88 |
--------------------------------------------------------------------------------
/src/types/components/WSteps.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-vars */
2 | /* eslint-disable @typescript-eslint/no-explicit-any */
3 | /* eslint-disable @typescript-eslint/ban-types */
4 | import type {
5 | ComputedGetter,
6 | ComputedOptions,
7 | DefineComponent,
8 | EmitsOptions,
9 | ExtractDefaultPropTypes,
10 | MethodOptions,
11 | SlotsType
12 | } from 'vue'
13 |
14 | import type {
15 | PublicProps,
16 | ResolveProps
17 | } from '../extra-vue-types'
18 |
19 | // ----------------------------------------------------------------------------
20 | // Props
21 | // ----------------------------------------------------------------------------
22 | export interface WaveStepsProps {
23 | /**
24 | * TODO: Add Description
25 | * @property {boolean} dark
26 | * @see https://antoniandre.github.io/wave-ui/w-steps
27 | */
28 | dark?: boolean
29 |
30 | /**
31 | * TODO: Add Description
32 | * @property {boolean} light
33 | * @see https://antoniandre.github.io/wave-ui/w-steps
34 | */
35 | light?: boolean
36 | }
37 |
38 | // ----------------------------------------------------------------------------
39 | // Emits
40 | // ----------------------------------------------------------------------------
41 | export type WaveStepsEmits = {}
42 |
43 | // ----------------------------------------------------------------------------
44 | // Computeds
45 | // ----------------------------------------------------------------------------
46 | export interface WaveStepsComputeds extends ComputedOptions {
47 | /**
48 | * TODO: Add Description
49 | * @see https://antoniandre.github.io/wave-ui/w-steps
50 | */
51 | classes: ComputedGetter
52 | }
53 |
54 | // ----------------------------------------------------------------------------
55 | // Methods
56 | // ----------------------------------------------------------------------------
57 | export interface WaveStepsMethods extends MethodOptions {
58 | }
59 |
60 | // ----------------------------------------------------------------------------
61 | // Slots
62 | // ----------------------------------------------------------------------------
63 | export type WaveStepsSlots = SlotsType<{
64 | }>
65 |
66 | // ----------------------------------------------------------------------------
67 | // Component
68 | // ----------------------------------------------------------------------------
69 | export type WSteps = DefineComponent<
70 | WaveStepsProps,
71 | {},
72 | {},
73 | WaveStepsComputeds,
74 | WaveStepsMethods,
75 | {},
76 | {},
77 | WaveStepsEmits & EmitsOptions,
78 | string,
79 | PublicProps,
80 | ResolveProps,
81 | ExtractDefaultPropTypes,
82 | WaveStepsSlots
83 | >
84 |
--------------------------------------------------------------------------------
/src/types/components/index.ts:
--------------------------------------------------------------------------------
1 | export { WAccordion } from './WAccordion'
2 | export { WAlert } from './WAlert'
3 | export { WApp } from './WApp'
4 | export { WBadge } from './WBadge'
5 | export { WBreadcrumbs } from './WBreadcrumbs'
6 | export { WButton } from './WButton'
7 | export { WCard } from './WCard'
8 | export { WCheckbox } from './WCheckbox'
9 | export { WCheckboxes } from './WCheckboxes'
10 | export { WConfirm } from './WConfirm'
11 | export { WDialog } from './WDialog'
12 | export { WDivider } from './WDivider'
13 | export { WDrawer } from './WDrawer'
14 | export { WFlex } from './WFlex'
15 | export { WFormElement } from './WFormElement'
16 | export { WForm } from './WForm'
17 | export { WGrid } from './WGrid'
18 | export { WIcon } from './WIcon'
19 | export { WImage } from './WImage'
20 | export { WInput } from './WInput'
21 | export { WList } from './WList'
22 | export { WMenu } from './WMenu'
23 | export { WNotificationManager } from './WNotificationManager'
24 | export { WNotification } from './WNotification'
25 | export { WOverlay } from './WOverlay'
26 | export { WProgress } from './WProgress'
27 | export { WRadio } from './WRadio'
28 | export { WRadios } from './WRadios'
29 | export { WRating } from './WRating'
30 | export { WSelect, WSelectDropdownItem } from './WSelect'
31 | export { WSlider } from './WSlider'
32 | export { WSpinner } from './WSpinner'
33 | export { WSteps } from './WSteps'
34 | export { WSwitch } from './WSwitch'
35 | export { WTable, WTableHeader, WTablePagination } from './WTable'
36 | export { WTabs } from './WTabs'
37 | export { WTag } from './WTag'
38 | export { WTextarea } from './WTextarea'
39 | export { WTimeline } from './WTimeline'
40 | export { WToolbar } from './WToolbar'
41 | export { WTooltip } from './WTooltip'
42 | export { WTree } from './WTree'
43 |
--------------------------------------------------------------------------------
/src/types/extra-vue-types.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-vars */
2 | /* eslint-disable @typescript-eslint/no-explicit-any */
3 | /* eslint-disable @typescript-eslint/ban-types */
4 | import type {
5 | AllowedComponentProps,
6 | ComponentCustomProps,
7 | ComponentPropsOptions,
8 | EmitsOptions,
9 | ExtractPropTypes,
10 | ObjectEmitsOptions,
11 | VNodeProps
12 | } from 'vue'
13 |
14 | export type EmitsToProps = T extends string[] ? {
15 | [K in string & `on${Capitalize}`]?: (...args: any[]) => any
16 | } : T extends ObjectEmitsOptions ? {
17 | [K in string & `on${Capitalize}`]?: K extends `on${infer C}` ? T[Uncapitalize] extends null ? (...args: any[]) => any : (...args: T[Uncapitalize] extends (...args: infer P) => any ? P : never) => any : never
18 | } : {}
19 |
20 | export type ResolveProps = Readonly : PropsOrPropOptions> & ({} extends E ? {} : EmitsToProps)
21 |
22 | export type PublicProps = VNodeProps & AllowedComponentProps & ComponentCustomProps
23 |
--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
1 | import { WaveUIPlugin } from './plugin'
2 |
3 | export type * from './$waveui'
4 | export type * from './colors'
5 | export type * from './components'
6 |
7 | export default WaveUIPlugin
8 |
--------------------------------------------------------------------------------
/src/types/plugin.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/ban-types */
2 | import type { App } from 'vue'
3 |
4 | import type { $waveui } from '@/types/$waveui'
5 |
6 | export interface BreakpointConfig {
7 | xs?: number
8 | sm?: number
9 | md?: number
10 | lg?: number
11 | xl?: number
12 | }
13 |
14 | export interface ConstructorOptions {
15 | colors?: Record>;
16 | breakpoints?: BreakpointConfig
17 | }
18 |
19 | export declare class WaveUIPlugin {
20 | static #registered: boolean
21 |
22 | $waveui: $waveui
23 |
24 | constructor(app: App, options?: ConstructorOptions & {})
25 |
26 | static install(app: App, options?: ConstructorOptions & {}): undefined
27 | }
28 |
--------------------------------------------------------------------------------
/src/wave-ui/components/index.js:
--------------------------------------------------------------------------------
1 | export { default as WAccordion } from './w-accordion/index.vue'
2 | export { default as WAccordionItem } from './w-accordion/item.vue'
3 | export { default as WAlert } from './w-alert.vue'
4 | export { default as WAutocomplete } from './w-autocomplete.vue'
5 | export { default as WApp } from './w-app.vue'
6 | export { default as WBadge } from './w-badge.vue'
7 | export { default as WBreadcrumbs } from './w-breadcrumbs.vue'
8 | export { default as WButton } from './w-button/index.vue'
9 | export { default as WCard } from './w-card.vue'
10 | export { default as WCheckbox } from './w-checkbox.vue'
11 | export { default as WCheckboxes } from './w-checkboxes.vue'
12 | export { default as WConfirm } from './w-confirm.vue'
13 | export { default as WDatePicker } from './w-date-picker.vue'
14 | export { default as WDialog } from './w-dialog.vue'
15 | export { default as WDivider } from './w-divider.vue'
16 | export { default as WDrawer } from './w-drawer.vue'
17 | export { default as WFlex } from './w-flex.vue'
18 | export { default as WForm } from './w-form.vue'
19 | export { default as WFormElement } from './w-form-element.vue'
20 | export { default as WGrid } from './w-grid.vue'
21 | export { default as WIcon } from './w-icon.vue'
22 | export { default as WImage } from './w-image.vue'
23 | export { default as WInput } from './w-input.vue'
24 | export { default as WList } from './w-list.vue'
25 | export { default as WMenu } from './w-menu.vue'
26 | export { default as WNotification } from './w-notification.vue'
27 | export { default as WOverlay } from './w-overlay.vue'
28 | export { default as WParallax } from './w-parallax.vue'
29 | export { default as WProgress } from './w-progress.vue'
30 | export { default as WRadio } from './w-radio.vue'
31 | export { default as WRadios } from './w-radios.vue'
32 | export { default as WRating } from './w-rating.vue'
33 | export { default as WScrollable } from './w-scrollable.vue'
34 | export { default as WSelect } from './w-select.vue'
35 | export { default as WSlider } from './w-slider.vue'
36 | export { default as WSpinner } from './w-spinner.vue'
37 | export { default as WSteps } from './w-steps.vue'
38 | export { default as WSwitch } from './w-switch.vue'
39 | export { default as WTabs } from './w-tabs/index.vue'
40 | export { default as WTable } from './w-table.vue'
41 | export { default as WTag } from './w-tag.vue'
42 | export { default as WTextarea } from './w-textarea.vue'
43 | export { default as WTimeline } from './w-timeline.vue'
44 | export { default as WToolbar } from './w-toolbar.vue'
45 | export { default as WTooltip } from './w-tooltip.vue'
46 | export { default as WTransitionBounce } from './transitions/w-transition-bounce.vue'
47 | export { default as WTransitionExpand } from './transitions/w-transition-expand.vue'
48 | export { default as WTransitionFade } from './transitions/w-transition-fade.vue'
49 | export { default as WTransitionScale } from './transitions/w-transition-scale.vue'
50 | export { default as WTransitionScaleFade } from './transitions/w-transition-scale-fade.vue'
51 | export { default as WTransitionSlide } from './transitions/w-transition-slide.vue'
52 | export { default as WTransitionSlideFade } from './transitions/w-transition-slide-fade.vue'
53 | export { default as WTransitionTwist } from './transitions/w-transition-twist.vue'
54 | export { default as WTree } from './w-tree.vue'
55 |
--------------------------------------------------------------------------------
/src/wave-ui/components/transitions/w-transition-bounce.vue:
--------------------------------------------------------------------------------
1 |
2 | transition(name="bounce" v-bind="$props")
3 | slot
4 |
5 |
6 |
15 |
--------------------------------------------------------------------------------
/src/wave-ui/components/transitions/w-transition-fade.vue:
--------------------------------------------------------------------------------
1 |
2 | transition(name="fade" v-bind="$props")
3 | slot
4 |
5 |
6 |
15 |
--------------------------------------------------------------------------------
/src/wave-ui/components/transitions/w-transition-scale-fade.vue:
--------------------------------------------------------------------------------
1 |
2 | transition(name="scale-fade" v-bind="$props")
3 | slot
4 |
5 |
6 |
15 |
--------------------------------------------------------------------------------
/src/wave-ui/components/transitions/w-transition-scale.vue:
--------------------------------------------------------------------------------
1 |
2 | transition(name="scale" v-bind="$props")
3 | slot
4 |
5 |
6 |
15 |
--------------------------------------------------------------------------------
/src/wave-ui/components/transitions/w-transition-slide-fade.vue:
--------------------------------------------------------------------------------
1 |
2 | transition(:name="transitionName" v-bind="$props")
3 | slot
4 |
5 |
6 |
34 |
--------------------------------------------------------------------------------
/src/wave-ui/components/transitions/w-transition-slide.vue:
--------------------------------------------------------------------------------
1 |
2 | transition(:name="transitionName" v-bind="$props")
3 | slot
4 |
5 |
6 |
34 |
--------------------------------------------------------------------------------
/src/wave-ui/components/transitions/w-transition-twist.vue:
--------------------------------------------------------------------------------
1 |
2 | transition(name="twist" v-bind="$props")
3 | slot
4 |
5 |
6 |
15 |
--------------------------------------------------------------------------------
/src/wave-ui/components/w-app.vue:
--------------------------------------------------------------------------------
1 |
2 | .w-app
3 | slot
4 |
5 |
6 |
25 |
--------------------------------------------------------------------------------
/src/wave-ui/components/w-breadcrumbs.vue:
--------------------------------------------------------------------------------
1 |
2 | .w-breadcrumbs(:class="classes")
3 | template(v-for="(item, i) in items")
4 | //- Separator.
5 | span.w-breadcrumbs__separator(
6 | v-if="i && $slots.separator"
7 | :key="`${i}a`"
8 | :class="separatorColor")
9 | slot(name="separator" :index="i")
10 | w-icon.w-breadcrumbs__separator(
11 | v-else-if="i"
12 | :key="`${i}b`"
13 | :class="separatorColor") {{ icon }}
14 |
15 | //- Link to parent pages.
16 | template(v-if="item[itemRouteKey] && (i < items.length - 1 || linkLastItem)")
17 | component.w-breadcrumbs__item(
18 | v-if="$slots.item"
19 | :key="`${i}c`"
20 | :is="hasRouter ? 'router-link' : 'a'"
21 | :to="hasRouter && item[itemRouteKey]"
22 | :href="item[itemRouteKey]"
23 | :class="color || null")
24 | slot(name="item" :item="item" :index="i + 1" :isLast="i === items.length - 1")
25 | component.w-breadcrumbs__item(
26 | v-else
27 | :key="`${i}d`"
28 | :is="hasRouter ? 'router-link' : 'a'"
29 | :to="hasRouter && item[itemRouteKey]"
30 | :href="item[itemRouteKey]"
31 | v-html="item[itemLabelKey]"
32 | :class="color || null")
33 |
34 | //- Current page when linkLastItem is false.
35 | slot(
36 | v-else-if="$slots.item"
37 | :key="`${i}e`"
38 | name="item"
39 | :item="item"
40 | :index="i + 1"
41 | :is-last="i === items.length - 1")
42 | span(v-else :key="`${i}f`" v-html="item[itemLabelKey]")
43 |
44 |
45 |
86 |
87 |
106 |
--------------------------------------------------------------------------------
/src/wave-ui/components/w-button/index.vue:
--------------------------------------------------------------------------------
1 |
2 | component(v-if="tooltip" is="w-tooltip" v-bind="tooltipProps")
3 | template(#activator="{ on }")
4 | button-partial(v-bind="buttonProps" v-on="on")
5 | slot
6 | div(v-html="tooltip")
7 | button-partial(v-else v-bind="buttonProps")
8 | slot
9 | template(#loading)
10 | slot(name="loading")
11 |
12 |
13 |
71 |
--------------------------------------------------------------------------------
/src/wave-ui/components/w-date-picker.vue:
--------------------------------------------------------------------------------
1 |
2 | .w-date-picker(:class="classes" :style="styles")
3 | slot
4 |
5 |
6 |
29 |
30 |
36 |
--------------------------------------------------------------------------------
/src/wave-ui/components/w-divider.vue:
--------------------------------------------------------------------------------
1 |
2 | .w-divider(
3 | :class="classes"
4 | :role="$slots.default ? null : 'presentation'"
5 | :aria-orientation="vertical ? 'vertical' : 'horizontal'")
6 | slot
7 |
8 |
9 |
35 |
36 |
85 |
--------------------------------------------------------------------------------
/src/wave-ui/components/w-flex.vue:
--------------------------------------------------------------------------------
1 |
2 | component.w-flex(:class="classes" :is="tag")
3 | slot
4 |
5 |
6 |
57 |
58 |
70 |
--------------------------------------------------------------------------------
/src/wave-ui/components/w-grid.vue:
--------------------------------------------------------------------------------
1 |
2 | component.w-grid(:class="classes" :is="tag")
3 | slot
4 |
5 |
6 |
73 |
74 |
83 |
--------------------------------------------------------------------------------
/src/wave-ui/components/w-notification-manager.vue:
--------------------------------------------------------------------------------
1 |
2 | teleport(to=".w-app")
3 | transition-group(
4 | tag="div"
5 | class="w-notification-manager"
6 | :class="{ 'w-notification-manager--left': conf.align === 'left' }"
7 | :name="transition"
8 | appear)
9 | template(v-for="notif in notifications")
10 | w-alert.white--bg(
11 | v-if="notif._value"
12 | :key="notif._uid"
13 | v-model="notif._value"
14 | @close="notif.dismiss"
15 | v-bind="notifProps(notif)")
16 | div(v-html="notif.message")
17 |
18 |
19 |
49 |
50 |
72 |
--------------------------------------------------------------------------------
/src/wave-ui/components/w-parallax.vue:
--------------------------------------------------------------------------------
1 |
2 | .w-parallax
3 |
4 |
5 |
19 |
20 |
24 |
--------------------------------------------------------------------------------
/src/wave-ui/components/w-slideshow.vue:
--------------------------------------------------------------------------------
1 |
2 | .w-slideshow(:class="classes" :style="styles")
3 | slot
4 |
5 |
6 |
23 |
24 |
28 |
--------------------------------------------------------------------------------
/src/wave-ui/components/w-steps.vue:
--------------------------------------------------------------------------------
1 |
2 | .w-steps(:class="classes")
3 |
4 |
5 |
29 |
30 |
35 |
--------------------------------------------------------------------------------
/src/wave-ui/components/w-tabs/tab-content.vue:
--------------------------------------------------------------------------------
1 |
2 | .w-tabs__content
3 | slot(:item="item")
4 |
5 |
6 |
15 |
--------------------------------------------------------------------------------
/src/wave-ui/components/w-timeline.vue:
--------------------------------------------------------------------------------
1 |
2 | ul.w-timeline(:class="classes")
3 | li.w-timeline-item(v-for="(item, i) in items" :key="i")
4 | component.w-timeline-item__bullet(
5 | :is="item[itemIconKey] || icon ? 'w-icon' : 'div'"
6 | :class="{ [item[itemColorKey] || color]: item[itemColorKey] || color }")
7 | | {{ item[itemIconKey] || icon }}
8 | slot(name="item" v-if="!$slots[`item.${i + 1}`]" :item="item" :index="i + 1")
9 | .w-timeline-item__title(
10 | :class="{ [item[itemColorKey] || color]: item[itemColorKey] || color }"
11 | v-html="item[itemTitleKey]")
12 | .w-timeline-item__content(v-html="item[itemContentKey]")
13 | slot(:name="`item.${i + 1}`" v-else :item="item" :index="i + 1")
14 |
15 |
16 |
43 |
44 |
87 |
--------------------------------------------------------------------------------
/src/wave-ui/index.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/ban-types */
2 | declare module 'wave-ui/src/wave-ui' {
3 | import type { App } from 'vue'
4 |
5 | import type { $waveui } from '@/types/$waveui'
6 | import type { ConstructorOptions } from '@/types/plugin'
7 |
8 | export declare class WaveUIPlugin {
9 | static #registered: boolean
10 |
11 | $waveui: $waveui
12 |
13 | constructor(app: App, options?: ConstructorOptions & {})
14 |
15 | install(app: App, options?: ConstructorOptions & {}): undefined
16 | }
17 |
18 | const WaveUI: WaveUIPlugin
19 |
20 | export default WaveUI
21 | }
22 |
--------------------------------------------------------------------------------
/src/wave-ui/index.js:
--------------------------------------------------------------------------------
1 | import WaveUI from './core'
2 | import * as components from './components'
3 |
4 | const install = WaveUI.install
5 | WaveUI.install = (app, options = {}) => install.call(WaveUI, app, { components, ...options })
6 |
7 | export default WaveUI
8 |
--------------------------------------------------------------------------------
/src/wave-ui/mixins/form-elements.js:
--------------------------------------------------------------------------------
1 | export default {
2 | inject: {
3 | // Used in each form component to determine whether to use the w-form-element wrap or not.
4 | // So, if a form component is in a form, use the w-form-element wrap.
5 | formRegister: { default: null },
6 | // If the form is disabled or readonly, apply to all the form components.
7 | formProps: { default: () => ({ disabled: false, readonly: false }) }
8 | },
9 |
10 | props: {
11 | name: { type: String }, // When sending data through form.
12 | disabled: { type: Boolean },
13 | readonly: { type: Boolean },
14 | required: { type: Boolean },
15 | tabindex: { type: String },
16 | validators: { type: Array }
17 | },
18 |
19 | data: () => ({
20 | valid: null // Null is pristine (unknown), can also be true or false.
21 | }),
22 |
23 | computed: {
24 | inputName () {
25 | return this.name || `${this.$options.name}--${this._.uid}`
26 | },
27 | isDisabled () {
28 | return this.disabled || this.formProps.disabled
29 | },
30 | isReadonly () {
31 | return this.readonly || this.formProps.readonly
32 | },
33 | validationColor () {
34 | return this.formProps.validationColor
35 | },
36 | labelClasses () {
37 | return {
38 | [this.labelColor]: this.labelColor && this.valid !== false,
39 | [this.validationColor]: this.valid === false
40 | }
41 | }
42 | },
43 |
44 | methods: {
45 | // Allow triggering a particular field validation manually via `$refs.myField.validate()`.
46 | validate () {
47 | this.$refs.formEl.validate(this)
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/wave-ui/scss/_base.scss:
--------------------------------------------------------------------------------
1 | @use "sass:map";
2 | @use "variables" as *;
3 |
4 | // The CSS variables are used in the dynamic-css.js file in order to reuse the same SCSS
5 | // variable presets.
6 | :root {
7 | --w-base-increment: #{$base-increment};
8 | --w-css-scope: #{$css-scope};
9 | --w-contrast-bg-o025-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 2.5%, transparent)};
10 | --w-contrast-bg-o05-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 5%, transparent)};
11 | --w-contrast-bg-o1-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 10%, transparent)};
12 | --w-contrast-bg-o2-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 20%, transparent)};
13 | --w-contrast-bg-o3-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 30%, transparent)};
14 | --w-contrast-bg-o4-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 40%, transparent)};
15 | --w-contrast-bg-o5-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 50%, transparent)};
16 | --w-contrast-bg-o6-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 60%, transparent)};
17 | --w-contrast-bg-o7-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 70%, transparent)};
18 | --w-contrast-bg-o8-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 80%, transparent)};
19 | --w-contrast-bg-o9-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 90%, transparent)};
20 |
21 | background-color: var(--w-base-bg-color);
22 | color: var(--w-base-color);
23 | }
24 |
25 | :root[data-theme="light"] {
26 | --w-base-bg-color: #{map.get($theme-light, 'base-bg-color')};
27 | --w-base-color: #{map.get($theme-light, 'base-color')};
28 | --w-contrast-bg-color: #{map.get($theme-light, 'contrast-bg-color')};
29 | --w-contrast-color: #{map.get($theme-light, 'contrast-color')};
30 | --w-caption-color: #{map.get($theme-light, 'caption-color')};
31 | --w-disabled-color: #{map.get($theme-light, 'disabled-color')};
32 | }
33 |
34 | :root[data-theme="dark"] {
35 | --w-base-bg-color: #{map.get($theme-dark, 'base-bg-color')};
36 | --w-base-color: #{map.get($theme-dark, 'base-color')};
37 | --w-contrast-bg-color: #{map.get($theme-dark, 'contrast-bg-color')};
38 | --w-contrast-color: #{map.get($theme-dark, 'contrast-color')};
39 | --w-caption-color: #{map.get($theme-dark, 'caption-color')};
40 | --w-disabled-color: #{map.get($theme-dark, 'disabled-color')};
41 | }
42 |
43 | * {
44 | outline: none;
45 | margin: 0;
46 | padding: 0;
47 | }
48 |
49 | body {overflow-x: hidden;}
50 |
51 | a {text-decoration: none;}
52 |
53 | .w-app {
54 | position: relative; // Make the .w-app a referential for tooltips / menus.
55 | display: flex;
56 | flex-direction: column;
57 | min-height: 100dvh;
58 |
59 | &, *, :before, :after {box-sizing: border-box;}
60 |
61 | &.row {flex-direction: row;}
62 | &.d-block {display: block;}
63 | &.align-center {align-items: center;}
64 | &.align-end {align-items: flex-end;}
65 | &.justify-center {justify-content: center;}
66 | &.justify-end {justify-content: flex-end;}
67 | &.justify-space-between {justify-content: space-between;}
68 | &.justify-space-around {justify-content: space-around;}
69 | &.justify-space-evenly {justify-content: space-evenly;}
70 | &.text-center {text-align: center;}
71 | &.text-right {text-align: right;}
72 | }
73 |
74 | .w-main {
75 | padding-left: 3 * $base-increment;
76 | padding-right: 3 * $base-increment;
77 | }
78 |
79 | // Structure classes.
80 | // ----------------------------------------------
81 | .content-wrap {
82 | position: relative;
83 | padding: $layout-padding;
84 | }
85 |
--------------------------------------------------------------------------------
/src/wave-ui/scss/_typography.scss:
--------------------------------------------------------------------------------
1 | @use "sass:math";
2 | @use 'variables' as *;
3 |
4 | #{$css-scope} {
5 | .headline, .title1 {
6 | font-size: math.round(2.2 * $base-font-size);
7 | font-weight: 100;
8 | }
9 |
10 | .title2 {
11 | font-size: math.round(1.7 * $base-font-size);
12 | font-weight: 400;
13 | }
14 |
15 | .title3 {
16 | font-size: math.round(1.4 * $base-font-size);
17 | font-weight: 400;
18 | }
19 |
20 | .title4 {
21 | font-size: math.round(1.25 * $base-font-size);
22 | font-weight: 400;
23 | }
24 |
25 | .title5 {
26 | font-size: math.round(1.1 * $base-font-size);
27 | font-weight: 600;
28 | }
29 |
30 | .body {
31 | font-size: $base-font-size;
32 | font-weight: normal;
33 | }
34 |
35 | .caption {
36 | font-size: math.round(0.85 * $base-font-size);
37 | font-style: italic;
38 | color: $caption-color;
39 | }
40 |
41 | .text-upper {text-transform: uppercase;}
42 | .text-lower {text-transform: lowercase;}
43 | .text-capitalize {text-transform: capitalize;}
44 | .text-light {font-weight: normal;}
45 | .text-bold {font-weight: bold;}
46 | .text-italic {font-style: italic;}
47 | .text-nowrap {white-space: nowrap;}
48 | }
49 |
--------------------------------------------------------------------------------
/src/wave-ui/scss/index.scss:
--------------------------------------------------------------------------------
1 | @forward 'base';
2 | @forward 'typography';
3 | @forward 'layout';
4 | @forward 'colors';
5 | @forward 'icons';
6 | @forward 'transitions';
7 |
--------------------------------------------------------------------------------
/src/wave-ui/scss/variables/_index.scss:
--------------------------------------------------------------------------------
1 | @forward 'variables';
2 | @forward 'mixins';
3 |
--------------------------------------------------------------------------------
/src/wave-ui/utils/config.js:
--------------------------------------------------------------------------------
1 | import { reactive } from 'vue'
2 |
3 | const config = reactive({
4 | on: '#app', // Sets the Wave UI root node. If not found, will default to `body`.
5 | breakpoints: {
6 | xs: 600,
7 | sm: 900,
8 | md: 1200,
9 | lg: 1700,
10 | xl: 9999 // Xl only needs a greater value than lg but starts from lg and goes to infinity.
11 | },
12 | css: {
13 | // Generate shades for custom colors and status colors.
14 | // Note: the color palette shades are always generated separately from SCSS.
15 | colorShades: true,
16 |
17 | // Generate CSS variables for color shades.
18 | // Note: colorShades must be enabled for this to work.
19 | colorShadeCssVariables: false,
20 |
21 | // Generate palette colors and palette color shades.
22 | // Can't have this option: color palette is generated via SCSS in colors.scss.
23 | // colorPalette: true,
24 |
25 | breakpointSpaces: false, // Generate margin & padding classes for each breakpoint. E.g. `sm-ma2`.
26 | // Generate helper classes for each breakpoint.
27 | // E.g. `sm-text-left`, `xs-hide`.
28 | breakpointLayoutClasses: true,
29 | grid: 12
30 | },
31 | colors: {
32 | // Default colors of Wave UI. Can be overridden from the Wave UI user config on init.
33 | light: {
34 | primary: '#234781',
35 | secondary: '#d3ebff',
36 | info: '#3d9ff5',
37 | warning: '#f80',
38 | success: '#54b946',
39 | error: '#f65555'
40 | },
41 | dark: {
42 | primary: '#89b6d2',
43 | secondary: '#375b6a',
44 | info: '#3d9ff5',
45 | warning: '#f80',
46 | success: '#54b946',
47 | error: '#f65555'
48 | }
49 | },
50 | // The initial theme to use.
51 | // To switch theme while running, call the $waveui.switchTheme('light'|'dark') method.
52 | theme: 'light', // One of 'light', 'dark', 'auto'.
53 | icons: [],
54 | iconsLigature: false,
55 | notificationManager: {
56 | align: 'right',
57 | transition: 'default' // Sliding from the side by default.
58 | },
59 | presets: {} // User presets for each component.
60 | })
61 |
62 | export { config as default }
63 |
64 | export const mergeConfig = (options, conf = config) => {
65 | // If the conf object is empty, populate with options (case of presets).
66 | if (!Object.keys(conf).length) conf = Object.assign(conf, options)
67 |
68 | else {
69 | for (const key in options) {
70 | const option = options[key]
71 | if (typeof option === 'object' && typeof conf[key] === 'object') {
72 | mergeConfig(options[key], conf[key])
73 | }
74 | else conf[key] = option
75 | }
76 | }
77 |
78 | return conf
79 | }
80 |
--------------------------------------------------------------------------------
/src/wave-ui/utils/console.js:
--------------------------------------------------------------------------------
1 | export const consoleWarn = message => console.warn(`Wave UI: ${message}`)
2 |
3 | export const consoleError = message => console.error(`Wave UI: ${message}`)
4 |
--------------------------------------------------------------------------------
/src/wave-ui/utils/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Takes CSS classes as a string array or object and turn them into an object.
3 | *
4 | * @param {String|Array|Object} classes the CSS classes to merge into an object
5 | * @return {Object}
6 | */
7 | export const objectifyClasses = (classes = {}) => {
8 | if (typeof classes === 'string') classes = { [classes]: true }
9 | else if (Array.isArray(classes)) classes = { [classes.join(' ')]: true }
10 | return classes
11 | }
12 |
--------------------------------------------------------------------------------
/src/wave-ui/utils/notification-manager.js:
--------------------------------------------------------------------------------
1 | import { h, render } from 'vue'
2 | import WNotificationManager from '../components/w-notification-manager.vue'
3 |
4 | export class NotificationManager {
5 | static #instance
6 | notifications
7 | // Private fields.
8 | _uid // A unique ID for each notification.
9 | _notificationDefaults
10 |
11 | constructor () {
12 | // Singleton pattern.
13 | if (NotificationManager.#instance) return NotificationManager.#instance
14 |
15 | this.notifications = []
16 | this._uid = 0
17 | this._notificationDefaults = {
18 | _uid: 0,
19 | _value: true,
20 | message: '',
21 | timeout: 4000,
22 | dismiss: true
23 | }
24 | NotificationManager.#instance = this
25 | }
26 |
27 | notify (...args) {
28 | let notification = {
29 | ...this._notificationDefaults,
30 | _uid: this._uid++
31 | }
32 |
33 | if (typeof args[0] === 'object') notification = { ...notification, ...args[0] }
34 | else {
35 | const [message, type, timeout] = args
36 | notification = {
37 | ...notification,
38 | message: message || '',
39 | [type === undefined ? 'info' : type]: true,
40 | timeout: timeout || timeout === 0 ? parseFloat(timeout) : 4000
41 | }
42 | }
43 |
44 | // Allow calling notification.dismiss().
45 | if (notification.dismiss) notification.dismiss = () => this.dismiss(notification._uid)
46 |
47 | this.notifications.push(notification)
48 | if (~~notification.timeout !== 0) setTimeout(() => this.dismiss(notification._uid), notification.timeout)
49 | }
50 |
51 | dismiss (uid) {
52 | this.notifications = this.notifications.filter(item => item._uid !== uid)
53 | }
54 | }
55 |
56 | /**
57 | * Injects the w-notification-manager in the DOM programmatically so the user does not have to do it.
58 | *
59 | * @param {Object} app The Vue app instance.
60 | */
61 | export const injectNotifManagerInDOM = app => {
62 | const div = document.createElement('div')
63 | document.body.appendChild(div) // Attach to body before teleporting.
64 |
65 | // Create a VNode for WNotificationManager and assign app._context to inherit global components.
66 | const vnode = h(WNotificationManager)
67 | vnode.appContext = app._context // ! \ Attach app context to inherit global components & provide()!
68 |
69 | render(vnode, div) // Render inside the main app scope.
70 |
71 | div.remove() // The WNotificationManager component teleports itself inside `.w-app`.
72 | }
73 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "http://json.schemastore.org/tsconfig",
3 | "extends": "@tsconfig/recommended/tsconfig.json",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "lib": ["es6", "dom", "es2017"],
7 | "outDir": "dist/types/",
8 | "baseUrl": ".",
9 | "paths": {
10 | "@/*": ["src/*"]
11 | }
12 | },
13 | "include": ["./src/**/*", "./src/**/*.ts", "./src/*.d.ts", "./src/**/*.d.ts"],
14 | "exclude": ["./dist/", "./node_modules/"]
15 | }
16 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { resolve } from 'node:path'
2 | import vue from '@vitejs/plugin-vue'
3 | import autoprefixer from 'autoprefixer'
4 | import Delete from 'rollup-plugin-delete'
5 | import { defineConfig } from 'vite'
6 | import svgLoader from 'vite-svg-loader'
7 |
8 | const bundlingConf = {
9 | lib: {
10 | entry: resolve(__dirname, '/src/wave-ui/index.js'),
11 | name: 'WaveUI',
12 | formats: ['es', 'umd', 'cjs']
13 | },
14 | rollupOptions: {
15 | plugins: [
16 | // Rollup generates all the files, then remove what we don't want.
17 | // @todo: find a better way.
18 | Delete({
19 | targets: ['dist/{images,.htaccess,ghspa.js}', 'dist/*.{ico,txt,html}'],
20 | hook: 'generateBundle'
21 | })
22 | ],
23 | // Make sure to externalize deps that shouldn't be bundled into library.
24 | external: ['vue'],
25 | output: {
26 | // Provide global variables to use in the UMD build for externalized deps.
27 | globals: { vue: 'Vue' },
28 | entryFileNames: 'wave-ui.[format].js',
29 | chunkFileNames: '[name].js'
30 | }
31 | }
32 | }
33 |
34 | export default defineConfig({
35 | define: {
36 | 'process.env': {
37 | ...process.env,
38 | VITE_APP_VERSION: process.env.npm_package_version,
39 | __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
40 | }
41 | },
42 | plugins: [
43 | vue({
44 | template: {
45 | compilerOptions: {
46 | whitespace: 'preserve'
47 | }
48 | }
49 | }),
50 | svgLoader()
51 | ], // https://vitejs.dev/config/
52 | css: {
53 | preprocessorOptions: {
54 | scss: {
55 | api: 'modern-compiler',
56 | additionalData: '@use "@/wave-ui/scss/variables" as *;@use "@/documentation/scss/variables" as *;'
57 | }
58 | },
59 | postcss: {
60 | plugins: [autoprefixer]
61 | }
62 | },
63 | resolve: {
64 | alias: {
65 | '@': resolve(__dirname, '/src')
66 | }
67 | },
68 | build: process.env.BUNDLE ? bundlingConf : { outDir: 'docs' }
69 | })
70 |
--------------------------------------------------------------------------------
