├── .gitignore ├── docs ├── examples │ ├── examples.md │ ├── jsfiddle.md │ ├── codesandbox.md │ ├── earth.md │ ├── counter.md │ ├── zooming-slider.md │ ├── zircle-without-router.md │ ├── cuba-libre-recipe.md │ ├── zircle-with-vue-router.md │ ├── github-trending-plus.md │ ├── themes-and-colors-selector.md │ ├── codepen.md │ ├── home.md │ ├── vuejs-ecosystem.md │ ├── plant.md │ └── fruit-basquet.md ├── .vuepress │ ├── public │ │ ├── one.jpg │ │ ├── two.jpg │ │ ├── angles.png │ │ ├── cubata.png │ │ ├── final.gif │ │ ├── plant.png │ │ ├── three.jpg │ │ ├── z-list.png │ │ ├── z-spot.png │ │ ├── z-view.png │ │ ├── smart-home.jpg │ │ ├── zircle-dev.png │ │ ├── icons │ │ │ ├── favicon.ico │ │ │ ├── favicon-16x16.png │ │ │ ├── favicon-32x32.png │ │ │ ├── mstile-150x150.png │ │ │ ├── apple-touch-icon.png │ │ │ ├── android-chrome-192x192.png │ │ │ ├── android-chrome-256x256.png │ │ │ ├── android-chrome-512x512.png │ │ │ ├── apple-touch-icon-60x60.png │ │ │ ├── apple-touch-icon-76x76.png │ │ │ ├── apple-touch-icon-120x120.png │ │ │ ├── apple-touch-icon-152x152.png │ │ │ ├── apple-touch-icon-180x180.png │ │ │ ├── browserconfig.xml │ │ │ ├── site.webmanifest │ │ │ └── safari-pinned-tab.svg │ │ ├── z-spot-layers.png │ │ ├── z-view-layers.png │ │ ├── zircle-app-modes.png │ │ ├── zircle-ui-blue.png │ │ ├── zircle-ui-white.png │ │ ├── initial-home-view.png │ │ ├── zircle-ui-blue-small.png │ │ ├── browserconfig.xml │ │ └── site.webmanifest │ ├── theme │ │ ├── search.svg │ │ ├── search1.svg │ │ ├── styles │ │ │ ├── search1.svg │ │ │ ├── config.styl │ │ │ ├── arrow.styl │ │ │ ├── custom-blocks.styl │ │ │ ├── mobile.styl │ │ │ ├── nprogress.styl │ │ │ ├── code.styl │ │ │ └── theme.styl │ │ ├── NotFound.vue │ │ ├── OutboundLink.vue │ │ ├── DropdownTransition.vue │ │ ├── SidebarButton.vue │ │ ├── NavLink.vue │ │ ├── SidebarGroup.vue │ │ ├── Navbar.vue │ │ ├── Sidebar.vue │ │ ├── SidebarLink.vue │ │ ├── Layout.vue │ │ ├── NavLinks.vue │ │ ├── AlgoliaSearchBox.vue │ │ ├── Home.vue │ │ ├── DropdownLink.vue │ │ ├── Page.vue │ │ ├── util.js │ │ └── SearchBox.vue │ └── config.js ├── api │ ├── z-list-pagination.md │ ├── z-scroll.md │ ├── z-knob.md │ ├── z-view-manager.md │ ├── z-slider.md │ ├── z-dialog.md │ ├── README.md │ ├── z-list.md │ ├── internal-api.md │ ├── z-canvas.md │ └── public-api.md ├── tutorial │ ├── bonus.md │ ├── building.md │ ├── wrapping-views.md │ ├── device-view.md │ ├── README.md │ ├── using-vuerouter.md │ ├── creating.md │ ├── views.md │ ├── devices-view.md │ ├── status-view.md │ ├── tv-view.md │ ├── logs-view.md │ ├── setup-files.md │ ├── family-view.md │ ├── rooms-view.md │ ├── scenes-view.md │ ├── settings-view.md │ ├── livingroom-view.md │ └── home-view.md ├── guide │ ├── older-version-docs.md │ ├── README.md │ ├── themes-styles-and-colors.md │ ├── design-guide.md │ ├── migration.md │ ├── getting-started.md │ └── using-vue-router.md ├── README.md └── contribute │ └── README.md ├── README.md ├── package.json ├── .github └── workflows │ └── vuepress-deploy.yml ├── CHANGELOG.md └── LICENSE /.gitignore: -------------------------------------------------------------------------------- 1 | /docs/.vuepress/dist 2 | -------------------------------------------------------------------------------- /docs/examples/examples.md: -------------------------------------------------------------------------------- 1 | 2 | # Examples 3 | -------------------------------------------------------------------------------- /docs/.vuepress/public/one.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/one.jpg -------------------------------------------------------------------------------- /docs/.vuepress/public/two.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/two.jpg -------------------------------------------------------------------------------- /docs/.vuepress/public/angles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/angles.png -------------------------------------------------------------------------------- /docs/.vuepress/public/cubata.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/cubata.png -------------------------------------------------------------------------------- /docs/.vuepress/public/final.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/final.gif -------------------------------------------------------------------------------- /docs/.vuepress/public/plant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/plant.png -------------------------------------------------------------------------------- /docs/.vuepress/public/three.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/three.jpg -------------------------------------------------------------------------------- /docs/.vuepress/public/z-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/z-list.png -------------------------------------------------------------------------------- /docs/.vuepress/public/z-spot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/z-spot.png -------------------------------------------------------------------------------- /docs/.vuepress/public/z-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/z-view.png -------------------------------------------------------------------------------- /docs/.vuepress/public/smart-home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/smart-home.jpg -------------------------------------------------------------------------------- /docs/.vuepress/public/zircle-dev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/zircle-dev.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/icons/favicon.ico -------------------------------------------------------------------------------- /docs/.vuepress/public/z-spot-layers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/z-spot-layers.png -------------------------------------------------------------------------------- /docs/.vuepress/public/z-view-layers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/z-view-layers.png -------------------------------------------------------------------------------- /docs/.vuepress/public/zircle-app-modes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/zircle-app-modes.png -------------------------------------------------------------------------------- /docs/.vuepress/public/zircle-ui-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/zircle-ui-blue.png -------------------------------------------------------------------------------- /docs/.vuepress/public/zircle-ui-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/zircle-ui-white.png -------------------------------------------------------------------------------- /docs/.vuepress/public/initial-home-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/initial-home-view.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/icons/favicon-16x16.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/icons/favicon-32x32.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/icons/mstile-150x150.png -------------------------------------------------------------------------------- /docs/.vuepress/public/zircle-ui-blue-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/zircle-ui-blue-small.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/icons/android-chrome-256x256.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/icons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/icons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/icons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zircleUI/docs/HEAD/docs/.vuepress/public/icons/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /docs/api/z-list-pagination.md: -------------------------------------------------------------------------------- 1 | # z-list-pagination 2 | 3 | Internally used by [z-list](/api/z-list.html). 4 | 5 | This child component works with `z-list` and displays a circular dot pagination. -------------------------------------------------------------------------------- /docs/api/z-scroll.md: -------------------------------------------------------------------------------- 1 | # z-scroll 2 | 3 | UInternally used by [z-view](/api/z-view.html). 4 | 5 | This component is a circular scrollbar and a child component of `z-view. It is activated when a content is larger than the view container. -------------------------------------------------------------------------------- /docs/examples/jsfiddle.md: -------------------------------------------------------------------------------- 1 | # JSFiddle 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/search.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/search1.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/search1.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # :books: zircle docs 2 | 3 | :point_right: Checkout the zircle documentation at [https://zircleui.github.io/docs/](https://zircleui.github.io/docs/) 4 | 5 | The documentation of zircle is generated using [**vuepress**](https://vuepress.vuejs.org/) 6 | -------------------------------------------------------------------------------- /docs/examples/codesandbox.md: -------------------------------------------------------------------------------- 1 | # CodeSandbox 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/.vuepress/public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #2b5797 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #2b5797 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /docs/examples/earth.md: -------------------------------------------------------------------------------- 1 | # Earth 2 | 3 | 5 | 6 | 7 | ::: tip 8 | Visit [the source repo](https://github.com/zircleUI/earth) 9 | ::: 10 | -------------------------------------------------------------------------------- /docs/api/z-knob.md: -------------------------------------------------------------------------------- 1 | # z-knob 2 | 3 | Internally used by [z-spot](/api/z-spot.html). 4 | 5 | As its name suggests this component display an interactive knob. Usefull to create controls like volumes, dimmers, etc. The current value is shown as a label. 6 | 7 | **Usage:** 8 | ```html 9 | 13 | 14 | ``` 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "2.0.1", 4 | "description": "Official documentation site for zircle-ui", 5 | "scripts": { 6 | "docs:dev": "vuepress dev docs", 7 | "docs:build": "vuepress build docs" 8 | }, 9 | "dependencies": { 10 | "vuepress": "0.11" 11 | }, 12 | "author": "Martin Muda", 13 | "license": "MIT" 14 | } 15 | -------------------------------------------------------------------------------- /docs/examples/counter.md: -------------------------------------------------------------------------------- 1 | # Counter 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/zooming-slider.md: -------------------------------------------------------------------------------- 1 | # Zooming slider 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/zircle-without-router.md: -------------------------------------------------------------------------------- 1 | # Zircle without router 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/cuba-libre-recipe.md: -------------------------------------------------------------------------------- 1 | # Cuba Libre Recipe 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/zircle-with-vue-router.md: -------------------------------------------------------------------------------- 1 | # Zircle with Vue-Router 2 | 3 | 5 | -------------------------------------------------------------------------------- /docs/examples/github-trending-plus.md: -------------------------------------------------------------------------------- 1 | # Github trending plus 2 | 3 | 5 | 6 | ::: tip 7 | This is an experimental example and is currently being developed. Visit [the source repo](https://github.com/zircleUI/github-trending-plus) 8 | ::: 9 | -------------------------------------------------------------------------------- /docs/examples/themes-and-colors-selector.md: -------------------------------------------------------------------------------- 1 | # Themes and Colors selector 2 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/config.styl: -------------------------------------------------------------------------------- 1 | // colors 2 | $accentColor = #3eaf7c 3 | $textColor = #2c3e50 4 | $borderColor = #eaecef 5 | $codeBgColor = #243447 6 | $arrowBgColor = #ccc 7 | 8 | // layout 9 | $navbarHeight = 3.6rem 10 | $sidebarWidth = 20rem 11 | $contentWidth = 740px 12 | 13 | // responsive breakpoints 14 | $MQNarrow = 959px 15 | $MQMobile = 719px 16 | $MQMobileNarrow = 419px 17 | @require './zircle' 18 | @import '~@temp/override.styl' // generated from user config 19 | -------------------------------------------------------------------------------- /docs/examples/codepen.md: -------------------------------------------------------------------------------- 1 | # CodePen 2 | 3 | -------------------------------------------------------------------------------- /docs/examples/home.md: -------------------------------------------------------------------------------- 1 | # Smart home dashboard 2 | 3 | 4 | 5 | 6 | ::: tip 7 | This example is the outcome of the [tutorial](/tutorial/) 8 | 9 | You can see the repo at https://github.com/zircleUI/smarthome-tutorial 10 | ::: 11 | -------------------------------------------------------------------------------- /docs/tutorial/bonus.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | Here we offer you additional views you can add to our **smart home app**. At this stage you should easily understand what the code does and for this reason little explanation is provided. 3 | 4 | However, if you find out that something isn't clear enough please file an issue or submit a pull request [on GitHub](https://github.com/zircleUI/tutorial). You can also speed up the PR by clicking in **'Edit this page'** that is available at the botton of the pages. 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.github/workflows/vuepress-deploy.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | on: [push] 3 | jobs: 4 | build-and-deploy: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Checkout 8 | uses: actions/checkout@master 9 | 10 | - name: vuepress-deploy 11 | uses: jenkey2011/vuepress-deploy@master 12 | env: 13 | ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} 14 | TARGET_REPO: zircleUI/docs 15 | BUILD_SCRIPT: yarn && yarn docs:build 16 | BUILD_DIR: docs/.vuepress/dist/ 17 | -------------------------------------------------------------------------------- /docs/guide/older-version-docs.md: -------------------------------------------------------------------------------- 1 | # Older version docs 2 | 3 | ::: tip 4 | 5 | I've been working on a new zooming library. 6 | 7 | Give **Zumly** a try and joing our community at [https://zumly.org](https://zumly.org) 8 | 9 | ::: 10 | 11 | 12 | The documentation for **zircle-ui 0.3.3** is available [on Github](https://github.com/zircleUI/docs/tree/master/older-docs/0.3.3) 13 | 14 | ::: tip 15 | Consider to migrate to **zircle-ui >= 0.9.0** . A brief guide is provided [here](/guide/migration.html) 16 | ::: 17 | 18 | -------------------------------------------------------------------------------- /docs/examples/vuejs-ecosystem.md: -------------------------------------------------------------------------------- 1 | # Vue.js ecosystem 2 | 3 | 5 | 6 | ::: tip 7 | This example was made in 2017. For an updated Vue.js Ecosystem visit [vuejs.org](https://vuejs.org) 8 | ::: -------------------------------------------------------------------------------- /docs/examples/plant.md: -------------------------------------------------------------------------------- 1 | # Smart plant 2 | 3 | 4 | 6 | 7 | ::: tip 8 | '*Album*' and '*Settings*' views are incomplete. You can fork this example and complete the missing views online. 9 | ::: 10 | -------------------------------------------------------------------------------- /docs/examples/fruit-basquet.md: -------------------------------------------------------------------------------- 1 | # Fruit basquet 2 | 4 | 5 | ::: tip 6 | This example is not updated. If you want to see how to search term and filter data [see this example](/examples/github-trending-plus.html) 7 | ::: -------------------------------------------------------------------------------- /docs/.vuepress/public/icons/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "zircle-ui", 3 | "short_name": "zircle-ui", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /docs/api/z-view-manager.md: -------------------------------------------------------------------------------- 1 | # z-view-manager 2 | 3 | Internally used by [z-canvas](/api/z-canvas.html). 4 | 5 | This component is the child component of `z-canvas` that controll which views are displayed. `z-view-manager` is wrapped by a [vue transition-group](https://vuejs.org/v2/api/#transition-group). 6 | 7 | Source code: 8 | 9 | **Props** 10 | 11 | | Prop | Type | Default value | Required | Description 12 | | :--- | :--- | :--- | :--- | :--- | 13 | | `list` | Object | `z-canvas`'s prop.views | True | Takes `z-canvas` prop.views as input to manages the views 14 | -------------------------------------------------------------------------------- /docs/.vuepress/public/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Zircle UI Docs", 3 | "short_name": "Zircle Docs", 4 | "icons": [ 5 | { 6 | "src": "/icons/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/icons/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | pageClass: home 4 | heroImage: /zircle-ui-white.png 5 | actionText: Github 6 | actionLink: https://github.com/zircleUI/zircleUI 7 | actionText1: Get Started 8 | actionLink1: /guide/ 9 | features: 10 | - title: Zoomable UI/UX 11 | details: Enjoy a different UI/UX with the built-in zoomable navigation - ZUI/UX. 12 | - title: Circles everywhere 13 | details: Breaking away from the conventional UI with a circular UI Kit and customizable themes and styles. 14 | - title: Responsive 15 | details: Zircle-ui works pretty well on mobile devices and big screens. 16 | --- -------------------------------------------------------------------------------- /docs/.vuepress/theme/NotFound.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 27 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/OutboundLink.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 13 | -------------------------------------------------------------------------------- /docs/api/z-slider.md: -------------------------------------------------------------------------------- 1 | # z-slider 2 | 3 | Internally used by [z-view](/api/z-view.html), [z-spot](/api/z-spot.html) and [z-dialog](/api/z-dialog.html). 4 | 5 | This component a circular slider. It is activated when is set to `true`. The value is proveded by prop.progress. 6 | 7 | **Usage:** 8 | ```html 9 | 10 | 11 | ``` 12 | 13 | **Props** 14 | 15 | | Prop | Type | Default value | Required | Description 16 | | :--- | :--- | :--- | :--- | :--- | 17 | | `slider` | Boolean | False | False | When it is `true` the slider is activated. 18 | | `progress` | Number | 0 | No | It's the initial slider value (0-100) 19 | 20 | -------------------------------------------------------------------------------- /docs/tutorial/building.md: -------------------------------------------------------------------------------- 1 | # Building up your app 2 | 3 | This section directly refers to [vue-cli build services](https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-build) 4 | 5 | In your terminal simple, under the app folder, run: 6 | 7 | ```bash 8 | npm run build 9 | ``` 10 | 11 | ## Previewing Locally 12 | The dist directory is meant to be served by an **HTTP server**, so it will not work if you open dist/index.html directly over **file://** protocol. The easiest way to preview your production build locally is using a Node.js static file server, for example serve: 13 | 14 | ```bash 15 | npm install -g serve 16 | 17 | serve dist 18 | ``` 19 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/arrow.styl: -------------------------------------------------------------------------------- 1 | @require './config' 2 | .arrow 3 | display inline-block 4 | width 0 5 | height 0 6 | &.up 7 | border-left 4px solid transparent 8 | border-right 4px solid transparent 9 | border-bottom 6px solid $arrowBgColor 10 | &.down 11 | border-left 4px solid transparent 12 | border-right 4px solid transparent 13 | border-top 6px solid $arrowBgColor 14 | &.right 15 | border-top 4px solid transparent 16 | border-bottom 4px solid transparent 17 | border-left 6px solid $arrowBgColor 18 | &.left 19 | border-top 4px solid transparent 20 | border-bottom 4px solid transparent 21 | border-right 6px solid $arrowBgColor 22 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/DropdownTransition.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 24 | 25 | 30 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/custom-blocks.styl: -------------------------------------------------------------------------------- 1 | .custom-block 2 | .custom-block-title 3 | font-weight 600 4 | margin-bottom -0.4rem 5 | &.tip, &.warning, &.danger 6 | padding .1rem 1.5rem 7 | border-left-width .5rem 8 | border-left-style solid 9 | margin 1rem 0 10 | &.tip 11 | background-color #f3f5f7 12 | border-color $accentColor 13 | &.warning 14 | background-color rgba(255,229,100,.3) 15 | border-color darken(#ffe564, 35%) 16 | color darken(#ffe564, 70%) 17 | .custom-block-title 18 | color darken(#ffe564, 50%) 19 | a 20 | color $textColor 21 | &.danger 22 | background-color #ffe6e6 23 | border-color darken(red, 20%) 24 | color darken(red, 70%) 25 | .custom-block-title 26 | color darken(red, 40%) 27 | a 28 | color $textColor 29 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/mobile.styl: -------------------------------------------------------------------------------- 1 | @require './config' 2 | 3 | $mobileSidebarWidth = $sidebarWidth * 0.82 4 | 5 | // narrow desktop / iPad 6 | @media (max-width: $MQNarrow) 7 | .sidebar 8 | font-size 15px 9 | width $mobileSidebarWidth 10 | .page 11 | padding-left $mobileSidebarWidth 12 | .content:not(.custom) 13 | padding 2rem 14 | 15 | // wide mobile 16 | @media (max-width: $MQMobile) 17 | .sidebar 18 | top 0 19 | padding-top $navbarHeight 20 | transform translateX(-100%) 21 | transition transform .2s ease 22 | .page 23 | padding-left 0 24 | .theme-container.sidebar-open 25 | .sidebar 26 | transform translateX(0) 27 | 28 | // narrow mobile 29 | @media (max-width: $MQMobileNarrow) 30 | h1 31 | font-size 1.9rem 32 | .content:not(.custom) 33 | padding 1.5rem 34 | .content 35 | pre, pre[class*="language-"] 36 | margin 0.85rem -1.5rem 37 | border-radius 0 38 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | 6 | ## [2.0.1](https://github.com/zircleUI/docs/compare/v2.0.0...v2.0.1) (2018-11-07) 7 | 8 | 9 | 10 | 11 | # [2.0.0](https://github.com/zircleUI/docs/compare/v1.0.2...v2.0.0) (2018-11-07) 12 | 13 | 14 | ### Documentation 15 | 16 | * ✏️ Document toView ([96258a2](https://github.com/zircleUI/docs/commit/96258a2)) 17 | 18 | 19 | ### Features 20 | 21 | * 🎸 add new demo example ([b4276d8](https://github.com/zircleUI/docs/commit/b4276d8)) 22 | 23 | 24 | ### BREAKING CHANGES 25 | 26 | * n 27 | 28 | Issues: 0 29 | 30 | 31 | 32 | 33 | ## [1.0.2](https://github.com/zircleUI/docs/compare/v1.0.1...v1.0.2) (2018-08-18) 34 | 35 | 36 | 37 | 38 | ## 1.0.1 (2018-08-17) 39 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/SidebarButton.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 29 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/NavLink.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 46 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 - present, Juan Martín Muda 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/nprogress.styl: -------------------------------------------------------------------------------- 1 | #nprogress 2 | pointer-events none 3 | .bar 4 | background $accentColor 5 | position fixed 6 | z-index 1031 7 | top 0 8 | left 0 9 | width 100% 10 | height 2px 11 | .peg 12 | display block 13 | position absolute 14 | right 0px 15 | width 100px 16 | height 100% 17 | box-shadow 0 0 10px $accentColor, 0 0 5px $accentColor 18 | opacity 1.0 19 | transform rotate(3deg) translate(0px, -4px) 20 | .spinner 21 | display block 22 | position fixed 23 | z-index 1031 24 | top 15px 25 | right 15px 26 | .spinner-icon 27 | width 18px 28 | height 18px 29 | box-sizing border-box 30 | border solid 2px transparent 31 | border-top-color $accentColor 32 | border-left-color $accentColor 33 | border-radius 50% 34 | animation nprogress-spinner 400ms linear infinite 35 | 36 | .nprogress-custom-parent 37 | overflow hidden 38 | position relative 39 | 40 | .nprogress-custom-parent #nprogress .spinner, 41 | .nprogress-custom-parent #nprogress .bar 42 | position absolute 43 | 44 | @keyframes nprogress-spinner 45 | 0% transform rotate(0deg) 46 | 100% transform rotate(360deg) 47 | -------------------------------------------------------------------------------- /docs/tutorial/wrapping-views.md: -------------------------------------------------------------------------------- 1 | # Wrapping views 2 | 3 | Was a long journey, but we are arriving to the final. We have created a lot of views trying to show most of the **zircle-ui** features. Now, we have to wire up our views into the **App.vue** file. 4 | 5 | Replace the **App.vue** code with this and voila! Our app should be working right now :) 6 | 7 | 8 | ```vue result 9 | 12 | 28 | 32 | 33 | ``` 34 | 35 | ### See 36 | - [**Guide: getting started**](/guide/getting-started.html#single-file-components-and-vue-cli) 37 | - [**z-canvas**](/api/z-canvas.html) 38 | - [**$zircle.setView()**](/api/public-api.html#setview-viewname) 39 | -------------------------------------------------------------------------------- /docs/tutorial/device-view.md: -------------------------------------------------------------------------------- 1 | # Device 2 | 3 | ### Description 4 | This is a generic view to display the device category selected in the **devices** view. This view retrieves the params given and shows them thanks to the **zircle-ui** action `getParams()` 5 | 6 | ### Reference 7 | - [Rooms view](/tutorial/rooms-view.html) 8 | - [getParams()](/api/public-api.html#getparams-definition) 9 | 10 | 11 | ### Code 12 | Create a `device.vue` file inside the `views` folder and paste the following code: 13 | 14 | ```vue 15 | 25 | 37 | 38 | ``` 39 | As we explain before, we create this view to show the details of our selected item. And we use `$zircle.getParams()` to retrieve the params. 40 | 41 | This is not the only way . You can create specials view for each item as we did in rooms view. 42 | 43 | ::: tip 44 | If you enable vue-router, its better to use $router.params to retrieve the params 45 | ::: 46 | 47 | ## Wire up 48 | 49 | Don't forget to import this component in **App.vue**! 50 | -------------------------------------------------------------------------------- /docs/tutorial/README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | ::: tip 4 | 5 | I've been working on a new zooming library. 6 | 7 | Give **Zumly** a try and joing our community at [https://zumly.org](https://zumly.org) 8 | 9 | ::: 10 | 11 | In this tutorial, we are going to create a **simple dashboard for a smart home app**. By the end, you should have a basic understanding of **zircle-ui**. Have in mind that the dashboard is designed just for learning purposes and is not meant to be ready for production. 12 | 13 | Some previous knowledge of [**vue.js**](https://vuejs.org) is recommended for this tutorial. 14 | 15 | 16 | 17 | If you don't want to follow this tutorial step-by-step, you can see the [app working in the examples section](/examples/home.html) or you can clone the dashboard to follow this tutorial. Open a terminal an type: 18 | 19 | ```bash 20 | git clone https://github.com/zircleUI/tutorial.git 21 | ``` 22 | 23 | After cloning the repository, got to the smart-home folder and execute: 24 | 25 | ```bash 26 | npm install 27 | ``` 28 | 29 | If you find a bug or find out that something is not clear enough, please file an issue or submit a pull request [on GitHub](https://github.com/zircleUI/tutorial). 30 | 31 | ## Credits 32 | 33 | During this tutorial we are going to use the following awesome libraries: 34 | 35 | - [**Font Awesome**](https://fontawesome.com/) 36 | - [**Leaflet**](https://leafletjs.com/) 37 | - [**Smoothie Charts**](http://smoothiecharts.org/) 38 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/SidebarGroup.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 29 | 30 | 64 | -------------------------------------------------------------------------------- /docs/tutorial/using-vuerouter.md: -------------------------------------------------------------------------------- 1 | # Using vue-router 2 | If you want to use vue-router, it is very easy to do eith zircle. Just setup the vue-router as follow and add its to config(). That is you dont need to define any route (if you dont want) 3 | Using Vue-Router is easy and straight forward because Zircle creates the routes automatically based on you views. 4 | 5 | ## Install vue-router in your app 6 | 7 | On your terminal, in the **smart-home** folder, type: 8 | 9 | ```bash 10 | npm install vue-router 11 | ``` 12 | 13 | In other projects based on vue-cli simply accept to *Install Vue-Router* in the project generator. 14 | 15 | ## Edit App.vue file 16 | 17 | ```vue{5-8,18,21} 18 | 21 | 44 | 48 | ``` 49 | 50 | ### See 51 | - [**Guide: Using vue-router**](/guide/using-vue-router.html) 52 | - [**z-canvas**](/api/z-canvas.html) 53 | - [**$zircle.config()**](/api/public-api.html#config-definition) 54 | - [**$zircle.setView()**](/api/public-api.html#setview-viewname) 55 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/Navbar.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 40 | 41 | 72 | -------------------------------------------------------------------------------- /docs/tutorial/creating.md: -------------------------------------------------------------------------------- 1 | # Creating your first app 2 | We are going to use [**vue-cli 3**](https://cli.vuejs.org/) to scalfold the **smart home app**. Vue-cli 3 is awesome to create vue projects without wasting time. 3 | 4 | If you have some experience with vue.js you can easily adapt this tutorial to be used into code sandboxes or browsers. Please check out our [getting started section](/guide/getting-started.html). 5 | 6 | In this section we'll learn how to **create a project using vue-cli 3** and how to **install zircle-ui** 7 | ### Create a vue proyect using vue-cli 3 8 | Let's start, to install **vue-cli 3**, open your terminal and type: 9 | 10 | ```bash 11 | npm install -g @vue/cli 12 | # OR 13 | yarn global add @vue/cli 14 | ``` 15 | 16 | After that we are ready to create our **smart home dashboard**. In the same terminal run: 17 | ```bash 18 | vue create smart-home 19 | ``` 20 | You will be prompted to pick a preset. For purposes of this tutorial choose the default preset that comes with a basic Babel + ESLint setup. 21 | 22 | Vue-cli will create a new folder called **'smart-home'** with the struture and files needed. Something like that: 23 | 24 | ```bash 25 | . 26 | ├── babel.config.js 27 | ├── package.json 28 | ├── package-lock.json 29 | ├── node_modules 30 | ├── public 31 | └── src 32 | ├── App.vue 33 | ├── assets 34 | ├── components 35 | ├── Views 36 | └── main.js 37 | ``` 38 | 39 | ### Install **zircle-ui** 40 | 41 | Now, it is time to install **zircle-ui**, in your terminal go to your smart-home folder and run: 42 | 43 | ```bash 44 | cd smart-home 45 | npm install zircle 46 | #or 47 | yarn add zircle 48 | ``` 49 | 50 | Finally, to check if your vue app is working in your terminal go to your smart-home folder and run: 51 | 52 | ```bash 53 | npm run serve 54 | # OR 55 | yarn serve 56 | ``` 57 | 58 | Open your web browser and go to `http://localhost:8080` to see the app running. 59 | 60 | ::: tip 61 | 62 | If the default port 8080 is used, Vue will choose another. See your terminal to find out the active port. 63 | 64 | ::: 65 | 66 | ### See 67 | - [**Guide: getting started**](/guide/getting-started.html) 68 | 69 | -------------------------------------------------------------------------------- /docs/tutorial/views.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | We have already done the setup of our app and created a mockup screen with a welcome message. Now it's time to create more interesting views to get familiar about how to use **zircle-ui**. Each view has some **zircle-ui** features that you may use in other zircle's projects. 3 | 4 | During this section you will note that some code is not directly related with **zircle-ui** itself, but to vue and its logic. 5 | 6 | ### Views 7 | - **Home:** Although we have already created this initial view, here we are going to enriched it! The idea is to understand how to build a **zircle-ui** view and organice its components. 8 | We'll learn how to use [**z-view**](/api/z-view.html) components to define the main circle of the screen and [**z-spot**](/api/z-spot.html) to create some buttons and view controllers. 9 | 10 | - **Settings:** In this view we are going to include a [**z-spot**](/api/z-spot.html) component running as **button**. We'll add a [**vue v-for directive**](https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for) to render a list of visual themes that comes with **zircle-ui**. Also, we'll learn how to use some [**zircle-ui actions**](/api/public-api.html) to set and retrieve themes. 11 | 12 | - **Scenes:** Here we'll create some scenes (day, night, at home, away) to simulate how our app controls the devices. We'll learn how to interact with a circular slider of [**z-view**](/api/z-view.html) and some **z-spots** buttons. 13 | 14 | - **Family:** This view shows the location of the family members in a [**leaflet.js**](#) map. We'll learn how to integrate three-party libraries into **zircle-ui** using the **slot.media** of [**z-view**](/api/z-view.html). 15 | 16 | - **Rooms:** This view display the list of rooms of our home. We'll learn how to use **z-list** component and to customize the items. Also, we are going to use the **z-dialog** component. 17 | 18 | - **Living room:** This view simulates the devices present in the living-room. Here we'll learn how to customize [**z-view**](/api/z-view.html) and to use [**z-spot**](/api/z-spot.html) as a circular **knob** to control the temperature of the air conditioner. Also, we are going to set up some scenes to control de devices. 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/api/z-dialog.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 2 3 | --- 4 | 5 | # z-dialog 6 | 7 | ## Description 8 | This component show a dialog on the top of any **zircle-ui** component when is invoked. Inside it you can only nest [z-spot](/api/z-spot.html) components. In further realeases this could be extended to another **zircle-ui** components. 9 | 10 | By default, `z-dialog` will remains open until the user manually close it. 11 | 12 | This is a `modal` view. 13 | 14 | ### Self close dialog 15 | However it is possible to add the property `selfClose` and in this case the `z-dialog` will be closed after 3 seconds when a circular `z-slider` is completed and the `z-dialog` event `done` is [emitted]((https://vuejs.org/v2/api/#vm-emit). 16 | 17 | ```html 18 | 22 | 23 | ``` 24 | 25 | ## Usage 26 | In you view's Vue instance add `$data.dialog` (or your prefered name) and set it to `false`. This way the `z-dialog` is not rendered. When dialog is set `true` the dialog will be rendered until the user closed it or self closed if it is enabled. 27 | 28 | ```js 29 | /* ... */ 30 | data () { 31 | return { 32 | dialog: false 33 | } 34 | } 35 | /* ... */ 36 | ``` 37 | ```html 38 | 41 | 42 | proceed? 43 | 49 | Close 50 | 51 | 52 | ``` 53 | ## Props 54 | 55 | | Prop | Type | Default value | Required | Description 56 | | :--- | :--- | :--- | :--- | :--- | 57 | | `selfClose` | Boolean | false | No | When it is true an the component will self closed after a while. 58 | 59 | ## Slots 60 | 61 | | Slot | Description 62 | | :--- | :--- | 63 | | `default` | Default Vue Slot. It is used to put any kind of content such as text, icons, etc. 64 | 65 | ## Events 66 | 67 | | event | Description 68 | | :--- | :--- | 69 | | `$emit('done') | This event is emitted in case the property `selfClose` is `true` and the progress slider has been completed. You can listen this event (`:done=yourMethod()`) to perfom some action. For example: [tutorial - logs view](/tutorial/logs-view.html) 70 | 71 | 72 | -------------------------------------------------------------------------------- /docs/tutorial/devices-view.md: -------------------------------------------------------------------------------- 1 | # Devices 2 | 3 | ### Description 4 | This is a very simple view that is going to be shown in the **home view**. This view simulates a list of smart devices. 5 | 6 | We are going to use a `z-list` component. Besides that, we are going to pass an object with params in the property `toView` in order to open a *no-yet-created* **device** view (you can build this view in the next section). 7 | 8 | ### References 9 | 10 | Most of code refers to: 11 | - [Rooms view](/tutorial/rooms-view.html) 12 | - [Home view](/tutorial/home-view.html) 13 | 14 | ### Code 15 | Create a `devices.vue` file inside the `views` folder and paste the following code: 16 | 17 | ```vue 18 | 40 | 64 | ``` 65 | 66 | 67 | ### Wiring up 68 | After you finish this view you need to import it in the **App.vue** [as we did it here](/tutorial/wrapping-views.html) -------------------------------------------------------------------------------- /docs/tutorial/status-view.md: -------------------------------------------------------------------------------- 1 | # Status 2 | ### Description 3 | This view use the third-party library [Smoothie-charts](http://smoothiecharts.org/) to simulate a status monitor chart. The code should be familliar for you as is similiar to previous views, specially family view. 4 | 5 | 6 | ### Reference 7 | - [Family view](/tutorial/family-view.html) 8 | 9 | ### Code 10 | Create a `status.vue` file inside the `views` folder and paste the following code: 11 | 12 | ```vue 13 | 28 | 68 | ``` 69 | #### Smoothie-charts.js 70 | You have to install Smoothie Charts in your project. Open a terminal, and inside your proyect folder type: 71 | ```bash 72 | npm install smoothie 73 | #or 74 | yarn add smoothie 75 | ``` 76 | 77 | ### Wiring up 78 | After you finish this view you need to import it in the **App.vue** [as we did it here](/tutorial/wrapping-views.html) 79 | -------------------------------------------------------------------------------- /docs/guide/README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | ::: tip 4 | 5 | I've been working on a new zooming library. 6 | 7 | Give **Zumly** a try and joing our community at [https://zumly.org](https://zumly.org) 8 | 9 | ::: 10 | 11 | 12 | ## What is zircle-ui? 13 | 14 | **Zircle-ui** is an experimental frontend library to develop [zoomable user interfaces (ZUI)](https://en.wikipedia.org/wiki/Zooming_user_interface). It is based on [vue.js](https://vuejs.org/) and Javascript and comes with a set of components to create unconventional UIs. 15 | 16 | demo 17 | 18 | ## Features 19 | 20 | - **Zoomable UI/UX** Enjoy a different UI/UX with the built-in zoomable navigation. 21 | 22 | - **Circles everywhere** Breaking away from the conventional UI with a circular UI Kit. 23 | 24 | - **Responsive** zircle-ui works pretty well on mobile devices and big screens.  25 | 26 | - **Customizable themes** Aren't the integrated color themes enough? No problem, it is easy to create new ones. 27 | 28 | - **Zero-conf routes** Using Vue-router? Let **zircle-ui** handles the routes for you. 29 | 30 | ## When to use zircle-ui? 31 | 32 | You can try **zircle-ui** to develop a wide range of applications, such as: dashboards, health/fitness trackers, IOT hubs or controllers, contact management, information and entertainment, interactive menus, etc. 33 | 34 | In general, using **zircle-ui** should be fine if your application is highly interactive and you need to intuitively view and control information without loosing the user’s attention. 35 | 36 | ## About zircle-ui 37 | **zircle-ui** is the first [Open Source Project](https://opensource.guide/starting-a-project/) I've made and it was possible thanks to the Open Source community, specially the [Vue](https://vuejs.org) community. 38 | 39 | **Zircle-ui** intends to promote a different approach in the universe of UIs. My main motivation is believing there is room for a new UI/UX not constrained to grid layouts or to squared shapes. 40 | 41 | **Zircle-ui** was inspired by the idea underneath some really awesome projects and articles like [prezi](https://www.prezi.com), [impress.js](https://github.com/impress/impress.js), [tizen](https://www.tizen.org/), [zoomooz](http://jaukia.github.io/zoomooz/), [creativebloq's article](https://www.creativebloq.com/create-zoomable-user-interface-css-transforms-9114269), [google maps](http://maps.google.com), [bootstrap](https://getbootstrap.com/), [UIKit](https://getuikit.com/) and [bulma](https://bulma.io) among others. 42 | 43 | Juan Martín Muda. 44 | 45 | 46 | -------------------------------------------------------------------------------- /docs/tutorial/tv-view.md: -------------------------------------------------------------------------------- 1 | # TV 2 | 3 | ### Description 4 | Here it is our TV control view. We have already refered to this view in the [living-room](#) and now is time to create it. 5 | 6 | We are using a `slot.media` with youtube to simulate a channel. 7 | 8 | ### References 9 | 10 | Most of code refers to: 11 | - [Family view](/tutorial/family-view.html) 12 | - [Home view](/tutorial/home-view.html) 13 | 14 | 15 | ### Code 16 | Create a `tv.vue` file inside the `views` folder and paste the following code: 17 | 18 | ```vue 19 | 62 | 86 | 87 | ``` 88 | 89 | ### Wiring up 90 | After you finish this view you need to import it in the **App.vue** [as we did it here](/tutorial/wrapping-views.html) 91 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 71 | 72 | 103 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/SidebarLink.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 89 | -------------------------------------------------------------------------------- /docs/tutorial/logs-view.md: -------------------------------------------------------------------------------- 1 | # Logs 2 | 3 | ### Description 4 | This simple view shows you what happens when the main content is larger than the `z-view` container. Also, the systems logs could be deleted pressing the reset button. A `z-dialog` will be activated to confirm that. 5 | 6 | ### Reference 7 | - [Rooms view](/tutorial/rooms-view.html) 8 | 9 | ### Code 10 | Create a `logs.vue` file inside the `views` folder and paste the following code: 11 | 12 | ```vue 13 | 57 | 90 | 96 | ``` 97 | 98 | ### Wiring up 99 | After you finish this view you need to import it in the **App.vue** [as we did it here](/tutorial/wrapping-views.html) 100 | -------------------------------------------------------------------------------- /docs/api/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 0 3 | --- 4 | # Introduction 5 | 6 | ::: tip 7 | 8 | I'm currently working on **Zumly**, which is a step forward to create zoomable web apps. You can be one of the first to try **Zumly** by joining our mailing list!! 9 | 10 | 11 | 12 | 17 |
18 |
19 |
20 | 21 |
22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 |
33 | 34 |
35 |
36 |
37 |
38 | 39 | 40 | 41 | 42 | More information at [zumly.org](https://zumly.org) 43 | 44 | ::: 45 | 46 | The API is divided in three sections: 47 | 48 | ## [Main components](/api/z-canvas.html) 49 | This section show the zircle's components exposed to the developer. 50 | 51 | ## [Child components](/api/z-view-manager.html) 52 | These components work inside the main components. 53 | 54 | ## [State management](/api/public-api.html) 55 | It is explained how to use the **zircle-ui state management**. When **zircle-ui** is [installed](/guide/getting-started.html) you have access to `$zircle` and the `actions` of the **zircle-ui state management**. A few of them are **public** and a lot are internal but usefull if you want to contribute or understand how **zircle-ui** works under the hood. 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /docs/.vuepress/theme/styles/code.styl: -------------------------------------------------------------------------------- 1 | @require './config' 2 | 3 | .content 4 | code 5 | color lighten($textColor, 20%) 6 | padding 0.25rem 0.5rem 7 | margin 0 8 | font-size 0.85em 9 | background-color rgba(27,31,35,0.05) 10 | border-radius 3px 11 | 12 | .content 13 | pre, pre[class*="language-"] 14 | line-height 1.4 15 | padding 1.25rem 1.5rem 16 | margin 0.85rem 0 17 | background transparent 18 | overflow auto 19 | code 20 | color #fff 21 | padding 0 22 | background-color transparent 23 | border-radius 0 24 | 25 | div[class*="language-"] 26 | position relative 27 | background-color $codeBgColor 28 | border-radius 6px 29 | .highlight-lines 30 | user-select none 31 | padding-top 1.3rem 32 | position absolute 33 | top 0 34 | left 0 35 | width 100% 36 | line-height 1.4 37 | .highlighted 38 | background-color rgba(0, 0, 0, 66%) 39 | pre 40 | position relative 41 | z-index 1 42 | &::before 43 | position absolute 44 | z-index 3 45 | top 0.8em 46 | right 1em 47 | font-size 0.75rem 48 | color rgba(255, 255, 255, 0.4) 49 | &:not(.line-numbers-mode) 50 | .line-numbers-wrapper 51 | display none 52 | &.line-numbers-mode 53 | .highlight-lines .highlighted 54 | position relative 55 | &:before 56 | content ' ' 57 | position absolute 58 | z-index 3 59 | left 0 60 | top 0 61 | display block 62 | width $lineNumbersWrapperWidth 63 | height 100% 64 | background-color rgba(0, 0, 0, 66%) 65 | pre 66 | padding-left $lineNumbersWrapperWidth + 1 rem 67 | vertical-align middle 68 | .line-numbers-wrapper 69 | position absolute 70 | top 0 71 | width $lineNumbersWrapperWidth 72 | text-align center 73 | color rgba(255, 255, 255, 0.3) 74 | padding 1.25rem 0 75 | line-height 1.4 76 | br 77 | user-select none 78 | .line-number 79 | position relative 80 | z-index 4 81 | user-select none 82 | font-size 0.85em 83 | &::after 84 | content '' 85 | position absolute 86 | z-index 2 87 | top 0 88 | left 0 89 | width $lineNumbersWrapperWidth 90 | height 100% 91 | border-radius 6px 0 0 6px 92 | border-right 1px solid rgba(0, 0, 0, 66%) 93 | background-color $codeBgColor 94 | 95 | 96 | for lang in js ts html md vue css sass scss less stylus go java c sh yaml 97 | div{'[class~="language-' + lang + '"]'} 98 | &:before 99 | content ('' + lang) 100 | 101 | div[class~="language-javascript"] 102 | &:before 103 | content "js" 104 | 105 | div[class~="language-typescript"] 106 | &:before 107 | content "ts" 108 | 109 | div[class~="language-markup"] 110 | &:before 111 | content "html" 112 | 113 | div[class~="language-markdown"] 114 | &:before 115 | content "md" 116 | 117 | div[class~="language-json"]:before 118 | content "json" 119 | 120 | div[class~="language-ruby"]:before 121 | content "rb" 122 | 123 | div[class~="language-python"]:before 124 | content "py" 125 | 126 | div[class~="language-bash"]:before 127 | content "sh" 128 | -------------------------------------------------------------------------------- /docs/api/z-list.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 2 3 | --- 4 | 5 | # z-list 6 | 7 | ## Description 8 | 9 | 10 | This component manages a list or collection of items. It works only inside `z-view` component and you need to use with the `z-view` **slot.extension**. In further releases it would be possible to extend `z-list` to [z-spot](/api/z-spot.html) and [z-dialog](/api/z-dialog.html). 11 | 12 | ### Populate your list 13 | `z-list`has a property named `items` to manage a list of items. The list has to be an `array`. 14 | 15 | ### Items por page 16 | Thanks to the property `perPage` you can define how many items are displayed en each page. By default `perPage` is set to show 5 items. 17 | 18 | When the items are more than one page the child component `z-list-pagination` is activated showing a dot navigation at the botton of the `z-list` 19 | 20 | ### Customizing items 21 | `` uses [scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots) to customize the template of each item. When you click or touch an item, a new view is called showing its details. 22 | 23 | As you maybe have noted, each item is a `z-spot` so its same properties applies here. However, there is an especial property you need to define: `index` 24 | 25 | ### Items view 26 | It is possible to define a view to go for each item. To achieve taht you need to use the property `toView`. This property has the same behavouir that `z-spot`. Thats means that you can define a view using just a `string`or you can pass params using an `object`. 27 | 28 | In the tutorial there are some examples if you want to see it in action: 29 | - [Rooms](/tutorial/rooms-view.html) 30 | - [Devices](/tutorial/devices-view.html) 31 | 32 | In case you pass `params` **zircle-ui** allows to catch the params given using [$zircle.getParams()](/api/public-api.html#getparams-definition) in you items view. 33 | 34 | 35 | ## Usage 36 | Populate the property `items` with an array of elements and define how many items per page you want to show using the property `per-page`. 37 | 38 | ```vue{3-12} 39 | 53 | 62 | ``` 63 | 64 | ::: tip 65 | To show the details of the selected item you have to create a new view. In this case a view named `device`. If you don't to it, when you click to see the items details an internal `404` view will appear. 66 | ::: 67 | 68 | ```js 69 | const device = { 70 | template: ` 71 | {{ item }} 72 | `, 73 | data () { 74 | return { 75 | item: this.$zircle.getParams().fruit 76 | } 77 | } 78 | } 79 | ``` 80 | 81 | ## Props 82 | 83 | | Prop | Type | Default value | Required | Description 84 | | :--- | :--- | :--- | :--- | :--- | 85 | | `collection` | Array | undefined | True | An array with items. 86 | | `perPage` | Number | 5 | False | The number of items per page. 87 | 88 | -------------------------------------------------------------------------------- /docs/api/internal-api.md: -------------------------------------------------------------------------------- 1 | # Internal API 2 | If you browse the [**zircle's source code**](https://github.com/zircleUI/zircleUI/tree/master/src) you may notice that there are a bunch of **$zircle** actions. Below, there is a descriptions of what they do. Useful to understand how **zircle-ui** works. 3 | 4 | ## Navigation API 5 | ### setComponentList(views) 6 | - **Params:** 7 | - {Object} views 8 | 9 | - **Descriptipn** 10 | Store your views. 11 | 12 | ### getComponentList() 13 | Retrieves the defined views. 14 | 15 | ### resolveComponent(views, view) 16 | - **Params:** 17 | - {Object} views 18 | - {String} view 19 | 20 | - **Descriptipn** 21 | Resolves view as a [vue component](https://vuejs.org/v2/guide/components-registration.html) 22 | 23 | ### getCurrentViewName() 24 | Returns the current view's name. 25 | 26 | ### getPreviousViewName() 27 | Returns the previous view's name. 28 | 29 | ### getPastViewName() 30 | Returns the past view's name. 31 | 32 | ### getHistory() 33 | Returns the zircle's browsing history 34 | 35 | ### getHistoryLength() 36 | Returns the history's length 37 | 38 | ### setNavigationMode(value) 39 | - **Params:** 40 | - {string} value 41 | 42 | - **Descriptipn** 43 | Set direction of the zoomable navigation to **forward** or **backward**. 44 | 45 | ### getNavigationMode() 46 | Returns the current navigation mode. 47 | 48 | ### getBackwardNavigationState() 49 | Returns the current navigation mode. 50 | 51 | ### goBack() 52 | Init a backward navigation. 53 | 54 | ## Position API 55 | ### getCurrentPosition() 56 | Returns coords of the current view 57 | 58 | ### getPreviousPosition() 59 | Returns coords of the previous view 60 | 61 | ### getPastPosition() 62 | Returns coords of the past view 63 | 64 | ### calcPanelPosition() 65 | Calculates the position of the view 66 | 67 | ### calcPosition(component) 68 | calculates the position of the nested components of a view 69 | 70 | ### getComponentWidth(size) 71 | - **Params:** 72 | - {string} size 73 | 74 | - **Descriptipn** 75 | Returns the value of a prop.size provided (e.g: 'small' => 140). 76 | 77 | ### updateDiameters() 78 | Recalculates the props.size of the components according the viewport when a resize event is detected. 79 | In case the app is in emedded mode, it will detect the canvas's width 80 | If the app uses percentage sizes, it will use the canvas's width to determine the width of the new components. 81 | In all cases, an adjustment of the width will be made according to the window.devicePixelRatio. This corrects positioning issues related to the OS scale and browser zoom. 82 | 83 | ## List API 84 | ### setPages(value) 85 | Creates the pages of the collection 86 | 87 | ### getPages() 88 | Returns the pages of the collection. 89 | 90 | ### getNumberOfPages() 91 | Returns the number of pages according the prop.perPage. 92 | 93 | ### getCurrentPage() 94 | Returns the items in the current page. 95 | 96 | ### getCurrentPageIndex() 97 | Returns the index of the current page. 98 | 99 | ### setCurrentPageIndex(value) 100 | 101 | ### getNumberOfItemsInCurrentPage() 102 | Returns the number of item in the current page. 103 | 104 | ## Router API 105 | ### setRouterHooks() 106 | - **Descriptipn** 107 | Invoked when the vue-router is enabled, after it has been set in [**$zircle.config()**](/api/public-api.html#config-definition) 108 | 109 | ### getRouterState() 110 | Retrieves the router state. 111 | 112 | - **Return** 113 | - Boolean. 114 | 115 | ## Debug API 116 | ### setLog(msg, type) 117 | - **Params:** 118 | - {string} msg 119 | - {String} type 120 | 121 | - **Descriptipn** 122 | Internal debug logger can be activated with [**$zircle.config()**](/api/public-api.html#config-definition). Prints messages to the browser's console. 123 | 124 | ### getState() 125 | - **Descriptipn** 126 | Retrieves the **zircle-ui** state management 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /docs/tutorial/setup-files.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebarDepth: 0 3 | --- 4 | 5 | # Setup main files 6 | 7 | To start working on our **smart home app** we need to replace some code tht comes with the default Vue starter app. 8 | 9 | ### Include zircle-ui within a vue project. 10 | First, go to folder **/src** and replace the **main.js** code with the following one: 11 | 12 | ```js{3-5} 13 | import Vue from 'vue' 14 | import App from './App.vue' 15 | import zircle from 'zircle' 16 | import 'zircle/dist/zircle.css' 17 | Vue.use(zircle) 18 | Vue.config.productionTip = true 19 | 20 | new Vue({ 21 | render: h => h(App) 22 | }).$mount('#app') 23 | ``` 24 | 25 | In the **main.js** file we have added the highligthed lines: 26 | 27 | The first two lines [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) **zircle-ui** and its css stylesheet file into vue.js. 28 | The last line tells Vue to [use **zircle-ui** as a plugin](https://vuejs.org/v2/guide/plugins.html#Using-a-Plugin) 29 | 30 | ::: tip 31 | This initial setup will be the same for all your zircle's projects. 32 | ::: 33 | 34 | 35 | ### Initial zircle-ui setup. 36 | We need to edit the **App.vue** file and replace the code with this: 37 | ```vue 38 | 41 | 52 | 56 | ``` 57 | 58 | In the `