docs(examples): Add uncontrolled component example

radial-color-picker · May 8, 2020 · 2d69dfb · 2d69dfb
1 parent 1c798e9
commit 2d69dfb
Show file tree

Hide file tree

Showing 8 changed files with 176 additions and 0 deletions.
diff --git a/examples/with-uncontrolled-component/.gitignore b/examples/with-uncontrolled-component/.gitignore
@@ -0,0 +1,19 @@
+.DS_Store
+node_modules
+dist
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+yarn.lock
+package-lock.json
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
diff --git a/examples/with-uncontrolled-component/README.md b/examples/with-uncontrolled-component/README.md
@@ -0,0 +1,32 @@
+# Example - With Uncontrolled Component
+
+Example shows how to only listen for changes of the color and skip `hue` and `@input`. Useful only for simple cases and the recommended usage is still
+```vue
+<color-picker :hue="hue" @input="onInput" />
+```
+
+## How to use
+Download the example [or clone the whole project](https://github.com/radial-color-picker/vue-color-picker.git):
+
+```bash
+curl https://codeload.github.com/radial-color-picker/vue-color-picker/tar.gz/master | tar -xz --strip=2 vue-color-picker-master/examples/with-uncontrolled-component
+cd with-uncontrolled-component
+```
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/examples/with-uncontrolled-component/babel.config.js b/examples/with-uncontrolled-component/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+    presets: ['@vue/app'],
+};
diff --git a/examples/with-uncontrolled-component/package.json b/examples/with-uncontrolled-component/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "example-with-uncontrolled-component",
+  "description": "Example with uncontrolled component",
+  "version": "2.0.0",
+  "author": "Rosen Kanev <rkunev@gmail.com>",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "@radial-color-picker/vue-color-picker": "latest",
+    "vue": "^2.6.10"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.3.1",
+    "@vue/cli-service": "^4.3.1",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
diff --git a/examples/with-uncontrolled-component/public/favicon.ico b/examples/with-uncontrolled-component/public/favicon.ico
diff --git a/examples/with-uncontrolled-component/public/index.html b/examples/with-uncontrolled-component/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>Radial Color Picker | Vue | With Component Configuration</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but with-config doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/examples/with-uncontrolled-component/src/App.vue b/examples/with-uncontrolled-component/src/App.vue
@@ -0,0 +1,64 @@
+<template>
+    <div id="app">
+        <color-picker @change="onChange" />
+        <h1>{{ msg }}</h1>
+        <pre>{{ color }}</pre>
+    </div>
+</template>
+
+<script>
+import ColorPicker from '@radial-color-picker/vue-color-picker';
+
+export default {
+    name: 'app',
+    components: { ColorPicker },
+    data() {
+        return {
+            msg: 'Welcome to Your Vue.js App',
+            color: 'hsl(0, 100%, 50%)',
+        };
+    },
+    methods: {
+        // Emitted after the user releases the knob
+        onChange(hue) {
+            this.color = `hsl(${hue}, 100%, 50%)`;
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+@import '~@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css';
+
+#app {
+    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #2c3e50;
+    margin-top: 40px;
+}
+
+h1 {
+    font-weight: normal;
+}
+
+pre {
+    min-width: 275px;
+    padding: 15px 30px;
+    background: #f8f8f8;
+    color: #525252;
+    font-size: 15px;
+    font-weight: bold;
+    line-height: 1.6;
+    margin: 0;
+}
+
+@media (max-width: 420px) {
+    h1 {
+        font-size: 1.4em;
+    }
+}
+</style>
diff --git a/examples/with-uncontrolled-component/src/main.js b/examples/with-uncontrolled-component/src/main.js
@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+Vue.config.productionTip = false;
+
+new Vue({
+    render: h => h(App),
+}).$mount('#app');