goodteditor-ui 1.0.26 → 1.0.28

package/src/components/ui/DatePicker.md

@@ -1,168 +1,168 @@
-Simple example
-
-```vue
-<template>
-    <div class="pad-l5">
-        <p>model: {{ model }}</p>
-        <div class="p">
-            <label>
-                <input class="checkbox checkbox-small" type="checkbox" v-model="props.range" />
-                <span class="pad-left-2 v-mid">range</span>
-            </label>
-        </div>
-        <date-picker v-model="model" v-bind="props"></date-picker>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            model: null,
-            props: {
-                dayOfWeek: 1,
-                dayNames: 'Вс,Пн,Вт,Ср,Чт,Пт,Сб'.split(','),
-                monthNames: 'Январь,Февраль,Март,Апрель,Май,Июнь,Июль,Август,Сентябрь,Октябрь,Ноябрь,Декабрь'.split(
-                    ','
-                ),
-                range: false,
-            },
-        };
-    },
-};
-</script>
-```
-
-Min, max, allowed etc
-
-```vue
-<template>
-    <div class="pad-l5">
-        <p>model: {{ model }}</p>
-        <date-picker v-model="model" v-bind="props"></date-picker>
-    </div>
-</template>
-<script>
-let d = new Date();
-export default {
-    data() {
-        return {
-            model: null,
-            props: {
-                dayOfWeek: 1,
-                dayNames: 'Вс,Пн,Вт,Ср,Чт,Пт,Сб'.split(','),
-                monthNames: 'Январь,Февраль,Март,Апрель,Май,Июнь,Июль,Август,Сентябрь,Октябрь,Ноябрь,Декабрь'.split(
-                    ','
-                ),
-                min: new Date(d.getFullYear(), d.getMonth(), 5),
-                max: new Date(d.getFullYear(), d.getMonth(), 25),
-                allowed: d => ![0, 6].includes(d.getDay()),
-            },
-        };
-    },
-};
-</script>
-```
-
-Range example
-
-```vue
-<template>
-    <div class="pad-l5">
-        <p>model: {{ model }}</p>
-        <date-picker v-model="model" v-bind="props"></date-picker>
-    </div>
-</template>
-<script>
-let dayjs = window.dayjs;
-export default {
-    data() {
-        return {
-            model: [],
-            props: {
-                range: true,
-                dayOfWeek: 1,
-                dayNames: 'Вс,Пн,Вт,Ср,Чт,Пт,Сб'.split(','),
-                monthNames: 'Январь,Февраль,Март,Апрель,Май,Июнь,Июль,Август,Сентябрь,Октябрь,Ноябрь,Декабрь'.split(
-                    ','
-                ),
-            },
-        };
-    },
-};
-</script>
-```
-
-Extended example using slots
-
-```vue
-<template>
-    <div class="pad-l5">
-        <p>model: {{ model }}</p>
-        <date-picker v-model="model" v-bind="props">
-            <template
-                #header="{ nextMonth, prevMonth, prevYear, nextYear, setToday, setMonth, setYear, month, monthName, year }"
-            >
-                <table class="pad-3 w-100">
-                    <tr>
-                        <td>
-                            <div class="text-lead">{{ monthName }}</div>
-                            <div class="text-small color-grey">
-                                <i class="mdi mdi-arrow-up cursor-pointer" @click="nextYear"></i>
-                                <input
-                                    class="color-inherit text-centerl"
-                                    type="number"
-                                    :value="year"
-                                    @input="e => setYear(e.target.value)"
-                                    style="border:none; width:4rem"
-                                />
-                                <i class="mdi mdi-arrow-down cursor-pointer" @click="prevYear"></i>
-                            </div>
-                        </td>
-                        <td width="1px">
-                            <i class="mdi mdi-calendar cursor-pointer" @click="setToday"></i>
-                        </td>
-                        <td width="1px">
-                            <i class="mdi mdi-arrow-up cursor-pointer" @click="nextMonth"></i>
-                            <i class="mdi mdi-arrow-down cursor-pointer" @click="prevMonth"></i>
-                        </td>
-                    </tr>
-                </table>
-            </template>
-            <template #cell-day="{ dayIndex, dayName, isWeekend }">
-                <div class="text-bold text-small" :class="{ 'color-red': isWeekend }">
-                    {{ dayName }}
-                </div>
-            </template>
-            <template #cell-date="{ date, isSelected, isToday, setDate }">
-                <div
-                    class="btn btn-icon btn-small pad-none round"
-                    :class="{
-                        'bg-primary color-white': isToday,
-                        'bg-red': isSelected,
-                    }"
-                    @click="setDate(date)"
-                >
-                    {{ date.getDate() }}
-                </div>
-            </template>
-        </date-picker>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            rangeOffset: 0,
-            model: null,
-            props: {
-                dayOfWeek: 1,
-                dayNames: 'Вс,Пн,Вт,Ср,Чт,Пт,Сб'.split(','),
-                monthNames: 'Январь,Февраль,Март,Апрель,Май,Июнь,Июль,Август,Сентябрь,Октябрь,Ноябрь,Декабрь'.split(
-                    ','
-                ),
-            },
-        };
-    },
-};
-</script>
-```
+Simple example
+
+```vue
+<template>
+    <div class="pad-l5">
+        <p>model: {{ model }}</p>
+        <div class="p">
+            <label>
+                <input class="checkbox checkbox-small" type="checkbox" v-model="props.range" />
+                <span class="pad-left-2 v-mid">range</span>
+            </label>
+        </div>
+        <date-picker v-model="model" v-bind="props"></date-picker>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            model: null,
+            props: {
+                dayOfWeek: 1,
+                dayNames: 'Вс,Пн,Вт,Ср,Чт,Пт,Сб'.split(','),
+                monthNames: 'Январь,Февраль,Март,Апрель,Май,Июнь,Июль,Август,Сентябрь,Октябрь,Ноябрь,Декабрь'.split(
+                    ','
+                ),
+                range: false,
+            },
+        };
+    },
+};
+</script>
+```
+
+Min, max, allowed etc
+
+```vue
+<template>
+    <div class="pad-l5">
+        <p>model: {{ model }}</p>
+        <date-picker v-model="model" v-bind="props"></date-picker>
+    </div>
+</template>
+<script>
+let d = new Date();
+export default {
+    data() {
+        return {
+            model: null,
+            props: {
+                dayOfWeek: 1,
+                dayNames: 'Вс,Пн,Вт,Ср,Чт,Пт,Сб'.split(','),
+                monthNames: 'Январь,Февраль,Март,Апрель,Май,Июнь,Июль,Август,Сентябрь,Октябрь,Ноябрь,Декабрь'.split(
+                    ','
+                ),
+                min: new Date(d.getFullYear(), d.getMonth(), 5),
+                max: new Date(d.getFullYear(), d.getMonth(), 25),
+                allowed: d => ![0, 6].includes(d.getDay()),
+            },
+        };
+    },
+};
+</script>
+```
+
+Range example
+
+```vue
+<template>
+    <div class="pad-l5">
+        <p>model: {{ model }}</p>
+        <date-picker v-model="model" v-bind="props"></date-picker>
+    </div>
+</template>
+<script>
+let dayjs = window.dayjs;
+export default {
+    data() {
+        return {
+            model: [],
+            props: {
+                range: true,
+                dayOfWeek: 1,
+                dayNames: 'Вс,Пн,Вт,Ср,Чт,Пт,Сб'.split(','),
+                monthNames: 'Январь,Февраль,Март,Апрель,Май,Июнь,Июль,Август,Сентябрь,Октябрь,Ноябрь,Декабрь'.split(
+                    ','
+                ),
+            },
+        };
+    },
+};
+</script>
+```
+
+Extended example using slots
+
+```vue
+<template>
+    <div class="pad-l5">
+        <p>model: {{ model }}</p>
+        <date-picker v-model="model" v-bind="props">
+            <template
+                #header="{ nextMonth, prevMonth, prevYear, nextYear, setToday, setMonth, setYear, month, monthName, year }"
+            >
+                <table class="pad-3 w-100">
+                    <tr>
+                        <td>
+                            <div class="text-lead">{{ monthName }}</div>
+                            <div class="text-small color-grey">
+                                <i class="mdi mdi-arrow-up cursor-pointer" @click="nextYear"></i>
+                                <input
+                                    class="color-inherit text-centerl"
+                                    type="number"
+                                    :value="year"
+                                    @input="e => setYear(e.target.value)"
+                                    style="border:none; width:4rem"
+                                />
+                                <i class="mdi mdi-arrow-down cursor-pointer" @click="prevYear"></i>
+                            </div>
+                        </td>
+                        <td width="1px">
+                            <i class="mdi mdi-calendar cursor-pointer" @click="setToday"></i>
+                        </td>
+                        <td width="1px">
+                            <i class="mdi mdi-arrow-up cursor-pointer" @click="nextMonth"></i>
+                            <i class="mdi mdi-arrow-down cursor-pointer" @click="prevMonth"></i>
+                        </td>
+                    </tr>
+                </table>
+            </template>
+            <template #cell-day="{ dayIndex, dayName, isWeekend }">
+                <div class="text-bold text-small" :class="{ 'color-red': isWeekend }">
+                    {{ dayName }}
+                </div>
+            </template>
+            <template #cell-date="{ date, isSelected, isToday, setDate }">
+                <div
+                    class="btn btn-icon btn-small pad-none round"
+                    :class="{
+                        'bg-primary color-white': isToday,
+                        'bg-red': isSelected,
+                    }"
+                    @click="setDate(date)"
+                >
+                    {{ date.getDate() }}
+                </div>
+            </template>
+        </date-picker>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            rangeOffset: 0,
+            model: null,
+            props: {
+                dayOfWeek: 1,
+                dayNames: 'Вс,Пн,Вт,Ср,Чт,Пт,Сб'.split(','),
+                monthNames: 'Январь,Февраль,Март,Апрель,Май,Июнь,Июль,Август,Сентябрь,Октябрь,Ноябрь,Декабрь'.split(
+                    ','
+                ),
+            },
+        };
+    },
+};
+</script>
+```