goodteditor-ui 1.0.26 → 1.0.28

package/src/components/ui/Select.md

@@ -1,187 +1,187 @@
-Simple example
-
-```vue
-<template>
-    <div
-        class="pad-l5"
-        :class="{ 'scroll-y': overflow }"
-        :style="{ 'max-height': overflow ? '200px' : 'none' }"
-    >
-        <p>
-            <label>
-                <input class="checkbox checkbox-small" type="checkbox" v-model="overflow" />
-                <span class="pad-left-2 v-mid">container overflow: auto</span>
-            </label>
-        </p>
-        <p>
-            <label>
-                <input
-                    class="checkbox checkbox-small"
-                    type="checkbox"
-                    v-model="props.appendToBody"
-                />
-                <span class="pad-left-2 v-mid">appendToBody</span>
-            </label>
-        </p>
-        <p>
-            <label>
-                <input class="checkbox checkbox-small" type="checkbox" v-model="props.multiple" />
-                <span class="pad-left-2 v-mid">multiple</span>
-            </label>
-        </p>
-        <ui-select class="w-6-12 p" v-model="model" v-bind="props"></ui-select>
-        <p>model: {{ model }}</p>
-    </div>
-</template>
-<script>
-import UiSelect from './Select.vue';
-
-let options = [
-    'angular',
-    'aurelia',
-    'backbone',
-    'ember',
-    'meteor',
-    'react',
-    'riot',
-    'stencil',
-    'svelte',
-    'vue',
-].map((label, i) => ({ value: i, label }));
-
-export default {
-    components: { UiSelect },
-    data() {
-        return {
-            model: null,
-            props: {
-                options: [{ value: null, label: 'nullish value' }, ...options],
-                placeholder: 'Select something',
-                appendToBody: false,
-                multiple: false,
-            },
-            overflow: false,
-        };
-    },
-};
-</script>
-```
-
-Advanced example. Using value object, multi selection, slots
-
-```vue
-<template>
-    <div class="pad-l5 ">
-        <ui-select class="p w-6-12" v-model="model" v-bind="props">
-            <template #icon-close>
-                <i class="mdi mdi-plus"></i>
-            </template>
-            <template #icon-open>
-                <i class="mdi mdi-minus"></i>
-            </template>
-            <template #label-multiple="{ option, value, label, deselectOption}">
-                <code class="cursor-pointer" @click.stop="deselectOption(option)">{{ label }}</code>
-            </template>
-            <template
-                #option="{ option, value, label, index, isSelected, cursorIndex, toggleOption }"
-            >
-                <li
-                    :class="{
-                        'text-bold': index == cursorIndex,
-                        'bg-green': isSelected,
-                    }"
-                    :key="index"
-                    @click="toggleOption(option)"
-                >
-                    {{ label }}
-                </li>
-            </template>
-        </ui-select>
-        <p>model: {{ model }}</p>
-    </div>
-</template>
-<script>
-import UiSelect from './Select.vue';
-
-let options = [
-    'angular',
-    'aurelia',
-    'backbone',
-    'ember',
-    'meteor',
-    'react',
-    'riot',
-    'stencil',
-    'svelte',
-    'vue',
-].map(value => ({ value, label: value }));
-
-export default {
-    components: { UiSelect },
-    data() {
-        return {
-            model: [{ value: 'vue', label: 'vue' }],
-            props: {
-                options,
-                multiple: true,
-                valueObjects: true,
-                placeholder: 'Select something',
-            },
-        };
-    },
-};
-</script>
-```
-
-Runtime options
-
-```vue
-<template>
-    <div class="pad-l5">
-        <ui-select class="w-6-12 p" v-model="model" v-bind="props"></ui-select>
-        <p>
-            <label>
-                <input class="checkbox checkbox-small" type="checkbox" v-model="props.multiple" />
-                <span class="pad-left-2 v-mid">multiple</span>
-            </label>
-        </p>
-        <p><div class="btn btn-primary" @click="toggleOptions">toggle options</div></p>
-        <p>model: {{ model }}</p>
-    </div>
-</template>
-<script>
-import UiSelect from './Select.vue';
-
-let options = [
-    'angular',
-    'aurelia',
-    'backbone',
-    'ember',
-    'meteor',
-    'react',
-    'riot',
-    'stencil',
-    'svelte',
-    'vue',
-];
-
-export default {
-    components: { UiSelect },
-    data() {
-        return {
-            model: 'vue',
-            props: {
-                options: [],
-                multiple: false,
-            },
-            overflow: false,
-        };
-    },
-    methods: {
-        toggleOptions() {
-            this.props.options = this.props.options.length ? [] : options;
-        },
-    },
-};
-</script>
-```
+Simple example
+
+```vue
+<template>
+    <div
+        class="pad-l5"
+        :class="{ 'scroll-y': overflow }"
+        :style="{ 'max-height': overflow ? '200px' : 'none' }"
+    >
+        <p>
+            <label>
+                <input class="checkbox checkbox-small" type="checkbox" v-model="overflow" />
+                <span class="pad-left-2 v-mid">container overflow: auto</span>
+            </label>
+        </p>
+        <p>
+            <label>
+                <input
+                    class="checkbox checkbox-small"
+                    type="checkbox"
+                    v-model="props.appendToBody"
+                />
+                <span class="pad-left-2 v-mid">appendToBody</span>
+            </label>
+        </p>
+        <p>
+            <label>
+                <input class="checkbox checkbox-small" type="checkbox" v-model="props.multiple" />
+                <span class="pad-left-2 v-mid">multiple</span>
+            </label>
+        </p>
+        <ui-select class="w-6-12 p" v-model="model" v-bind="props"></ui-select>
+        <p>model: {{ model }}</p>
+    </div>
+</template>
+<script>
+import UiSelect from './Select.vue';
+
+let options = [
+    'angular',
+    'aurelia',
+    'backbone',
+    'ember',
+    'meteor',
+    'react',
+    'riot',
+    'stencil',
+    'svelte',
+    'vue',
+].map((label, i) => ({ value: i, label }));
+
+export default {
+    components: { UiSelect },
+    data() {
+        return {
+            model: null,
+            props: {
+                options: [{ value: null, label: 'nullish value' }, ...options],
+                placeholder: 'Select something',
+                appendToBody: false,
+                multiple: false,
+            },
+            overflow: false,
+        };
+    },
+};
+</script>
+```
+
+Advanced example. Using value object, multi selection, slots
+
+```vue
+<template>
+    <div class="pad-l5 ">
+        <ui-select class="p w-6-12" v-model="model" v-bind="props">
+            <template #icon-close>
+                <i class="mdi mdi-plus"></i>
+            </template>
+            <template #icon-open>
+                <i class="mdi mdi-minus"></i>
+            </template>
+            <template #label-multiple="{ option, value, label, deselectOption}">
+                <code class="cursor-pointer" @click.stop="deselectOption(option)">{{ label }}</code>
+            </template>
+            <template
+                #option="{ option, value, label, index, isSelected, cursorIndex, toggleOption }"
+            >
+                <li
+                    :class="{
+                        'text-bold': index == cursorIndex,
+                        'bg-green': isSelected,
+                    }"
+                    :key="index"
+                    @click="toggleOption(option)"
+                >
+                    {{ label }}
+                </li>
+            </template>
+        </ui-select>
+        <p>model: {{ model }}</p>
+    </div>
+</template>
+<script>
+import UiSelect from './Select.vue';
+
+let options = [
+    'angular',
+    'aurelia',
+    'backbone',
+    'ember',
+    'meteor',
+    'react',
+    'riot',
+    'stencil',
+    'svelte',
+    'vue',
+].map(value => ({ value, label: value }));
+
+export default {
+    components: { UiSelect },
+    data() {
+        return {
+            model: [{ value: 'vue', label: 'vue' }],
+            props: {
+                options,
+                multiple: true,
+                valueObjects: true,
+                placeholder: 'Select something',
+            },
+        };
+    },
+};
+</script>
+```
+
+Runtime options
+
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-select class="w-6-12 p" v-model="model" v-bind="props"></ui-select>
+        <p>
+            <label>
+                <input class="checkbox checkbox-small" type="checkbox" v-model="props.multiple" />
+                <span class="pad-left-2 v-mid">multiple</span>
+            </label>
+        </p>
+        <p><div class="btn btn-primary" @click="toggleOptions">toggle options</div></p>
+        <p>model: {{ model }}</p>
+    </div>
+</template>
+<script>
+import UiSelect from './Select.vue';
+
+let options = [
+    'angular',
+    'aurelia',
+    'backbone',
+    'ember',
+    'meteor',
+    'react',
+    'riot',
+    'stencil',
+    'svelte',
+    'vue',
+];
+
+export default {
+    components: { UiSelect },
+    data() {
+        return {
+            model: 'vue',
+            props: {
+                options: [],
+                multiple: false,
+            },
+            overflow: false,
+        };
+    },
+    methods: {
+        toggleOptions() {
+            this.props.options = this.props.options.length ? [] : options;
+        },
+    },
+};
+</script>
+```