1,553rd Commit

app/src/routes/(backstage)/(library)/charts/map/+page.vue

@@ -63,14 +63,18 @@ const mapChartOption = computed<EChartsOption>(() => {
       right: 'right',
       top: 'top',
       feature: {
-        restore: {},
+        restore: { title: 'Restore' },
       },
     },
     series: [
       {
         name: 'Population',
         type: 'map',
         roam: true,
+        scaleLimit: {
+          min: 1,
+          max: 5.5,
+        },
         map: 'world',
         emphasis: {
           label: {

app/src/routes/(backstage)/(library)/data-entry/form-validation/Touched.vue

@@ -3,7 +3,7 @@ import { computed, reactive, toRef, onMounted } from 'vue';
 import { useSchema } from 'vue-formor';
 import { useLocaler } from 'vue-localer';
 import { XButton, XCard, XCheckbox, XDatePicker, XRadioGroup, XSelect, XTextField } from '@x/ui';
-import { XTextarea, useValdnLocale } from '@x/ui';
+import { XTextarea, XMultiselect, useValdnLocale } from '@x/ui';
 import * as v from 'valibot';
 
 interface BasicForm {
@@ -14,6 +14,7 @@ interface BasicForm {
   pronouns?: 1 | 2 | 3;
   urlPasteBehavior?: 1 | 2;
   birthday?: string;
+  topics?: string[];
   bio?: string;
   agreed?: boolean;
 }
@@ -61,6 +62,10 @@ const schema = useSchema(
       pronouns: v.nullish(v.pipe(v.number(), v.minValue(1, valdnLocale.value.required)), 0),
       urlPasteBehavior: v.nullish(v.pipe(v.number(), v.minValue(1, valdnLocale.value.required)), 0),
       birthday: v.nullish(v.pipe(v.string(), v.minLength(1, valdnLocale.value.required)), ''),
+      topics: v.nullish(
+        v.pipe(v.array(v.string()), v.minLength(1, valdnLocale.value.required)),
+        [],
+      ),
       bio: v.nullish(v.pipe(v.string(), v.minLength(1, valdnLocale.value.required)), ''),
       agreed: v.literal(true, valdnLocale.value.required),
     }),
@@ -154,6 +159,21 @@ const submit = () => {
           @blur="state.touched.birthday = true"
         />
 
+        <XMultiselect
+          v-model:value="state.form.topics"
+          label="Topics"
+          :options="[
+            { label: 'Vue', value: 'vue' },
+            { label: 'Tauri', value: 'tauri' },
+            { label: 'Fastify', value: 'fastify' },
+            { label: 'Pulumi', value: 'pulumi' },
+          ]"
+          filterable
+          required
+          :invalid="state.valdn.topics"
+          @blur="state.touched.topics = true"
+        />
+
         <div class="md:col-span-2">
           <XTextarea
             v-model:value="state.form.bio"

ui/src/components/autocomplete/Autocomplete.vue

@@ -2,12 +2,11 @@
 import { nextTick, ref, computed, reactive } from 'vue';
 import { useDebounceFn, onClickOutside } from '@vueuse/core';
 
+import Fade from '../fade/Fade.vue';
+import TextField from '../text-field/TextField.vue';
 import useScrollParent from '../../composables/scroll-parent/useScrollParent';
 import request from '../../utilities/request/request';
 
-import TextField from '../text-field/TextField.vue';
-import Fade from '../fade/Fade.vue';
-
 defineOptions({
   inheritAttrs: false,
 });

ui/src/components/calendar/Calendar.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
 import chunk from 'lodash/chunk';
-import range from 'lodash/range';
 import groupBy from 'lodash/groupBy';
+import range from 'lodash/range';
 import * as d from 'date-fns';
 
 type Day = {

ui/src/components/date-picker/DatePicker.vue

@@ -44,7 +44,7 @@ const props = withDefaults(
 const emit = defineEmits<{
   (evt: 'update:value', val: string): void;
   (evt: 'change', val: string): void;
-  // (evt: 'blur'): void;
+  (evt: 'blur'): void;
 }>();
 
 const localer = useLocaler();
@@ -246,6 +246,15 @@ const flux = reactive({
   },
 });
 
+watch(
+  () => flux.showDatePicker,
+  (val) => {
+    if (!val) {
+      emit('blur');
+    }
+  },
+);
+
 watch(
   () => flux.currentMoment,
   (val) => {

ui/src/components/multiautocomplete/Multiautocomplete.vue

@@ -1,12 +1,10 @@
 <script lang="ts" setup>
-import { ref, reactive, nextTick } from 'vue';
+import { nextTick, ref, reactive } from 'vue';
 import { useDebounceFn, onClickOutside } from '@vueuse/core';
 
-// import useScrollParent from '../../composables/scroll-parent/useScrollParent';
-import request from '../../utilities/request/request';
-
 import ChipField from '../chip-field/ChipField.vue';
 import Fade from '../fade/Fade.vue';
+import request from '../../utilities/request/request';
 
 const valueModel = defineModel<string[]>('value', { default: [] });
 

ui/src/components/multiselect/Multiselect.vue

@@ -57,6 +57,7 @@ const props = withDefaults(
 const emit = defineEmits<{
   (evt: 'update:value', val?: Option['value'][] | null): void;
   (evt: 'change', val?: Option['value'] | null, opt?: Option | null): void;
+  (evt: 'blur'): void;
 }>();
 
 const localer = useLocaler();
@@ -269,6 +270,15 @@ useScrollParent(
     if (flux.show) resizePanel();
   },
 );
+
+watch(
+  () => flux.show,
+  (val) => {
+    if (!val) {
+      emit('blur');
+    }
+  },
+);
 </script>
 
 <template>

ui/src/components/select/Select.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { ref, reactive, computed, watch, watchEffect, nextTick, inject } from 'vue';
+import { nextTick, ref, computed, reactive, watchEffect, watch, inject } from 'vue';
 import { onClickOutside } from '@vueuse/core';
 import { useLocale } from 'vue-localer';
 
+import Fade from '../fade/Fade.vue';
 import FormControl from '../form-control/FormControl.vue';
 import ProgressBar from '../progress-bar/ProgressBar.vue';
-import Fade from '../fade/Fade.vue';
 import TextField from '../text-field/TextField.vue';
 import useScrollParent from '../../composables/scroll-parent/useScrollParent';
 

ui/src/components/table/Table.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup generic="T extends object">
 import type { VNode } from 'vue';
-import { ref, computed, reactive, watch, watchEffect, toRef } from 'vue';
+import { ref, computed, reactive, watchEffect, watch, toRef } from 'vue';
 import { useLocaler, useLocale } from 'vue-localer';
 import { useScroll } from '@vueuse/core';
 
 import type staticTable from '../../utilities/static-table/staticTable';
-import Spinner from '../spinner/Spinner.vue';
 import Button from '../button/Button.vue';
-import Select from '../select/Select.vue';
 import Checkbox from '../checkbox/Checkbox.vue';
+import Select from '../select/Select.vue';
+import Spinner from '../spinner/Spinner.vue';
 
 import type { ColumnItem, Control } from './types';
 import Column from './Column.vue';

ui/src/components/table/index.ts

@@ -1,7 +1,7 @@
-import Cell from './Cell.vue';
+import Table from './Table.vue';
 import Column from './Column.vue';
 import Row from './Row.vue';
-import Table from './Table.vue';
+import Cell from './Cell.vue';
 
 export default Object.assign(Table, {
   Column,

ui/src/components/week-picker/WeekPicker.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { nextTick, ref, computed } from 'vue';
 import { onClickOutside } from '@vueuse/core';
-import * as d from 'date-fns';
 import chunk from 'lodash/chunk';
+import * as d from 'date-fns';
 
 import Fade from '../fade/Fade.vue';
 import TextField from '../text-field/TextField.vue';

ui/src/composables/outline/useOutline.ts

@@ -2,7 +2,7 @@
 
 import type { ComputedRef } from 'vue';
 import type { ComponentProps } from 'vue-component-type-helpers';
-import { toRef, toValue, computed, onMounted, watch } from 'vue';
+import { computed, watch, toRef, toValue, onMounted } from 'vue';
 import { useIntersectionObserver } from '@vueuse/core';
 
 import type Outline from '../../components/outline/Outline.vue';

ui/src/composables/scroll-parent/useScrollParent.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { ref, watch, onMounted, onUnmounted } from 'vue';
 
 import scrollableParent from './scrollableParent';