sard-uniapp 1.2.2 → 1.4.0-alpha

package/changelog.md

@@ -1,3 +1,16 @@
+# [1.4.0-alpha](https://github.com/sutras/sard-uniapp/compare/v1.3.0...v1.4.0-alpha) (2024-08-01)
+
+
+
+# [1.3.0](https://github.com/sutras/sard-uniapp/compare/v1.2.2...v1.3.0) (2024-07-16)
+
+
+### Features
+
+* 新增radio-input, checkbox-input, alert组件 ([a2d24fc](https://github.com/sutras/sard-uniapp/commit/a2d24fc080337df2f39d6abdc887517adf8428c1))
+
+
+
 ## [1.2.2](https://github.com/sutras/sard-uniapp/compare/v1.2.0...v1.2.2) (2024-07-13)
 
 

package/components/alert/alert.d.ts

@@ -0,0 +1,35 @@
+import { type AlertProps, type AlertSlots } from './common';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<AlertProps>, {
+    type: "primary";
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<AlertProps>, {
+    type: "primary";
+}>>> & {
+    onClose?: (() => any) | undefined;
+}, {
+    type: "success" | "primary" | "warning" | "danger";
+}, {}>, Readonly<AlertSlots> & AlertSlots>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/components/alert/alert.vue

@@ -0,0 +1,74 @@
+<template>
+  <view v-if="visible" :class="alertClass" :style="alertStyle">
+    <view v-if="showIcon" :class="bem.e('icon')">
+      <slot name="icon">
+        <sar-icon :name="mapTypeIcon[type]" />
+      </slot>
+    </view>
+    <view :class="bem.e('content')"><slot></slot></view>
+    <view v-if="closable" :class="bem.e('close')" @click="onClose">
+      <sar-icon name="close" />
+    </view>
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed, ref } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+import {
+  alertPropsDefaults,
+  mapTypeIcon
+} from "./common";
+import SarIcon from "../icon/icon.vue";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "alert",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    showIcon: { type: Boolean, required: false },
+    closable: { type: Boolean, required: false },
+    type: { type: String, required: false },
+    color: { type: String, required: false },
+    background: { type: String, required: false }
+  }, alertPropsDefaults),
+  emits: ["close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("alert");
+    const visible = ref(true);
+    const onClose = () => {
+      visible.value = false;
+      emit("close");
+    };
+    const alertClass = computed(() => {
+      return classNames(bem.b(), bem.m(props.type), props.rootClass);
+    });
+    const alertStyle = computed(() => {
+      return stringifyStyle(
+        {
+          color: props.color,
+          background: props.background
+        },
+        props.rootStyle
+      );
+    });
+    const __returned__ = { props, emit, bem, visible, onClose, alertClass, alertStyle, get mapTypeIcon() {
+      return mapTypeIcon;
+    }, SarIcon };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/alert/common.d.ts

@@ -0,0 +1,26 @@
+import { type StyleValue } from 'vue';
+export interface AlertProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    showIcon?: boolean;
+    closable?: boolean;
+    type?: 'primary' | 'success' | 'warning' | 'danger';
+    color?: string;
+    background?: string;
+}
+export declare const alertPropsDefaults: {
+    type: "primary";
+};
+export interface AlertSlots {
+    default?(props: Record<string, never>): any;
+    icon?(props: Record<string, never>): any;
+}
+export interface AlertEmits {
+    (e: 'close'): void;
+}
+export declare const mapTypeIcon: {
+    primary: string;
+    success: string;
+    warning: string;
+    danger: string;
+};

package/components/alert/common.js

@@ -0,0 +1,8 @@
+import { defaultConfig } from '../config';
+export const alertPropsDefaults = defaultConfig.alert;
+export const mapTypeIcon = {
+    primary: 'info-circle-fill',
+    success: 'check-circle-fill',
+    warning: 'warning-fill',
+    danger: 'x-circle-fill',
+};

package/components/alert/index.d.ts

@@ -0,0 +1 @@
+export type { AlertProps, AlertSlots, AlertEmits } from './common';

package/components/alert/index.js

@@ -0,0 +1 @@
+export {};

package/components/alert/index.scss

@@ -0,0 +1,59 @@
+@use '../style/base' as *;
+
+@include bem(alert) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--sar-alert-paddding-y) var(--sar-alert-paddding-x);
+    font-size: var(--sar-alert-font-size);
+
+    @each $type,
+      $color
+        in (
+          primary: (
+            var(--sar-primary),
+            var(--sar-primary-rgb),
+          ),
+          success: (
+            var(--sar-success),
+            var(--sar-success-rgb),
+          ),
+          warning: (
+            var(--sar-warning),
+            var(--sar-warning-rgb),
+          ),
+          danger: (
+            var(--sar-danger),
+            var(--sar-danger-rgb),
+          )
+        )
+    {
+      @include m($type) {
+        color: nth($color, 1);
+        background-color: rgba(nth($color, 2), var(--sar-alert-bg-opacity));
+      }
+    }
+  }
+
+  @include e(icon) {
+    @include universal;
+    margin-right: var(--sar-alert-icon-margin-right);
+    line-height: 1;
+  }
+
+  @include e(content) {
+    @include universal;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  @include e(close) {
+    @include universal;
+    font-size: var(--sar-alert-close-size);
+    padding: var(--sar-alert-close-padding);
+    margin: var(--sar-alert-close-margin) var(--sar-alert-close-margin)
+      var(--sar-alert-close-margin) 0;
+    cursor: pointer;
+  }
+}

package/components/alert/variables.scss

@@ -0,0 +1,14 @@
+// #variables
+page {
+  --sar-alert-paddding-x: 32rpx;
+  --sar-alert-paddding-y: 16rpx;
+  --sar-alert-font-size: var(--sar-text-base);
+  --sar-alert-bg-opacity: 0.1;
+
+  --sar-alert-icon-margin-right: 12rpx;
+
+  --sar-alert-close-padding: 16rpx;
+  --sar-alert-close-margin: -16rpx;
+  --sar-alert-close-size: var(--sar-text-base);
+}
+// #endvariables

package/components/button/button.d.ts

@@ -14,7 +14,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {
     size: "small" | "medium" | "mini" | "large";
     type: "text" | "default" | "pale" | "mild" | "outline" | "pale-text";
-    theme: "success" | "primary" | "info" | "secondary" | "warning" | "danger" | "neutral";
+    theme: "success" | "primary" | "info" | "warning" | "danger" | "secondary" | "neutral";
 }, {}>, Readonly<ButtonSlots> & ButtonSlots>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/components/calendar-input/calendar-input.vue

@@ -83,7 +83,8 @@ export default  _defineComponent({
     placeholder: { type: String, required: false },
     readonly: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },
-    clearable: { type: Boolean, required: false }
+    clearable: { type: Boolean, required: false },
+    multiline: { type: Boolean, required: false }
   }, calendarInputPropsDefaults),
   emits: ["update:visible", "update:model-value"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -109,11 +110,6 @@ export default  _defineComponent({
       const value = popoutValue.value;
       return !value || Array.isArray(value) && value.length === 0;
     });
-    const onConfirm = () => {
-      innerValue.value = popoutValue.value;
-      emit("update:model-value", popoutValue.value);
-      inputValue.value = getInputValue();
-    };
     const onChange = (value) => {
       popoutValue.value = value;
       if (!props.showConfirm && !confirmDisabled.value) {
@@ -121,6 +117,11 @@ export default  _defineComponent({
         innerVisible.value = false;
       }
     };
+    const onConfirm = () => {
+      innerValue.value = popoutValue.value;
+      emit("update:model-value", popoutValue.value);
+      inputValue.value = getInputValue();
+    };
     const inputValue = ref("");
     const { t } = useTranslate("calendar");
     function getOutletText(date, type) {
@@ -175,7 +176,7 @@ export default  _defineComponent({
       innerVisible.value = true;
       emit("update:visible", true);
     };
-    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, confirmDisabled, onConfirm, onChange, inputValue, format, t, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarCalendar, SarPopout };
+    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, confirmDisabled, onChange, onConfirm, inputValue, format, t, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarCalendar, SarPopout };
     return __returned__;
   }
 });

package/components/cascader-input/cascader-input.vue

@@ -76,7 +76,8 @@ export default  _defineComponent({
     readonly: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },
     clearable: { type: Boolean, required: false },
-    loading: { type: Boolean, required: false }
+    loading: { type: Boolean, required: false },
+    multiline: { type: Boolean, required: false }
   }, cascaderInputPropsDefaults),
   emits: ["update:visible", "update:model-value", "select"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -98,11 +99,6 @@ export default  _defineComponent({
     watch(innerValue, () => {
       popoutValue.value = innerValue.value;
     });
-    const onConfirm = () => {
-      innerValue.value = popoutValue.value;
-      emit("update:model-value", popoutValue.value);
-      inputValue.value = getInputValue();
-    };
     const onChange = (value) => {
       popoutValue.value = value;
       if (!props.showConfirm && !isNullish(popoutValue.value)) {
@@ -110,6 +106,11 @@ export default  _defineComponent({
         innerVisible.value = false;
       }
     };
+    const onConfirm = () => {
+      innerValue.value = popoutValue.value;
+      emit("update:model-value", popoutValue.value);
+      inputValue.value = getInputValue();
+    };
     const inputValue = ref("");
     const fieldkeys = computed(() => {
       return Object.assign(
@@ -167,7 +168,7 @@ export default  _defineComponent({
       innerVisible.value = true;
       emit("update:visible", true);
     };
-    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, onConfirm, onChange, inputValue, fieldkeys, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarCascader, SarPopout };
+    const __returned__ = { props, emit, formItemContext, innerValue, popoutValue, onChange, onConfirm, inputValue, fieldkeys, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarCascader, SarPopout };
     return __returned__;
   }
 });

package/components/checkbox/common.d.ts

@@ -26,6 +26,17 @@ export interface CheckboxEmits {
     (e: 'click', event: any): void;
     (e: 'update:checked', checked: boolean): void;
 }
+export declare const defaultOptionKeys: {
+    label: string;
+    value: string;
+};
+export type CheckboxGroupOption = {
+    [key: PropertyKey]: any;
+} | string | number | boolean;
+export interface CheckboxGroupOptionKeys {
+    label?: string;
+    value?: string;
+}
 export interface CheckboxGroupProps {
     rootStyle?: StyleValue;
     rootClass?: string;
@@ -37,6 +48,8 @@ export interface CheckboxGroupProps {
     checkedColor?: string;
     direction?: 'horizontal' | 'vertical';
     validateEvent?: boolean;
+    options?: CheckboxGroupOption[];
+    optionKeys?: CheckboxGroupOptionKeys;
 }
 export declare const checkboxGroupPropsDefaults: {
     direction: "vertical";

package/components/checkbox/common.js

@@ -1,5 +1,9 @@
 import { defaultConfig } from '../config';
 export const checkboxPropsDefaults = defaultConfig.checkbox;
+export const defaultOptionKeys = {
+    label: 'label',
+    value: 'value',
+};
 export const checkboxGroupPropsDefaults = defaultConfig.checkboxGroup;
 export const checkboxContextSymbol = Symbol('checkbox-context');
 export const mapTypeIcon = {

package/components/checkbox-group/checkbox-group.vue

@@ -9,19 +9,32 @@
       :toggle="toggle"
       :value="innerValue"
     ></slot>
-    <slot v-else></slot>
+    <slot v-else>
+      <template v-if="options">
+        <sar-checkbox
+          v-for="option in options"
+          :key="isPrimitive(option) ? option : option[fieldKeys.value]"
+          :value="isPrimitive(option) ? option : option[fieldKeys.value]"
+          :validate-event="false"
+        >
+          {{ isPrimitive(option) ? option : option[fieldKeys.label] }}
+        </sar-checkbox>
+      </template>
+    </slot>
   </view>
 </template>
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { ref, watch, provide, toRef, reactive } from "vue";
+import { ref, watch, provide, toRef, reactive, computed } from "vue";
 import {
   checkboxContextSymbol,
-  checkboxGroupPropsDefaults
+  checkboxGroupPropsDefaults,
+  defaultOptionKeys
 } from "../checkbox/common";
-import { classNames, createBem, stringifyStyle } from "../../utils";
+import { classNames, createBem, isPrimitive, stringifyStyle } from "../../utils";
 import { useFormItemContext } from "../form/common";
+import SarCheckbox from "../checkbox/checkbox.vue";
 export default  _defineComponent({
   ...{
     options: {
@@ -40,7 +53,9 @@ export default  _defineComponent({
     type: { type: String, required: false },
     checkedColor: { type: String, required: false },
     direction: { type: String, required: false },
-    validateEvent: { type: Boolean, required: false }
+    validateEvent: { type: Boolean, required: false },
+    options: { type: Array, required: false },
+    optionKeys: { type: Object, required: false }
   }, checkboxGroupPropsDefaults),
   emits: ["click", "update:model-value"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -49,6 +64,9 @@ export default  _defineComponent({
     const emit = __emit;
     const bem = createBem("checkbox-group");
     const formItemContext = useFormItemContext();
+    const fieldKeys = computed(() => {
+      return Object.assign({}, defaultOptionKeys, props.optionKeys);
+    });
     const innerValue = ref(props.modelValue || []);
     watch(
       () => props.modelValue,
@@ -76,11 +94,13 @@ export default  _defineComponent({
         toggle
       })
     );
-    const __returned__ = { props, emit, bem, formItemContext, innerValue, toggle, get classNames() {
+    const __returned__ = { props, emit, bem, formItemContext, fieldKeys, innerValue, toggle, get classNames() {
       return classNames;
+    }, get isPrimitive() {
+      return isPrimitive;
     }, get stringifyStyle() {
       return stringifyStyle;
-    } };
+    }, SarCheckbox };
     return __returned__;
   }
 });

package/components/checkbox-input/checkbox-input.d.ts

@@ -0,0 +1,35 @@
+import { type CheckboxInputProps } from './common';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<CheckboxInputProps>, {
+    options: () => never[];
+    validateEvent: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:visible": (visible: boolean) => void;
+    "update:model-value": (value: any) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<CheckboxInputProps>, {
+    options: () => never[];
+    validateEvent: boolean;
+}>>> & {
+    "onUpdate:model-value"?: ((value: any) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+}, {
+    options: import("../checkbox/common").CheckboxGroupOption[];
+    validateEvent: boolean;
+}, {}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/components/checkbox-input/checkbox-input.vue

@@ -0,0 +1,185 @@
+<template>
+  <sar-popout-input
+    v-model="inputValue"
+    :placeholder="placeholder"
+    :readonly="readonly"
+    :disabled="disabled"
+    :clearable="clearable"
+    multiline
+    @clear="onClear"
+    @click="onInputClick"
+  />
+
+  <sar-popout
+    :root-class="rootClass"
+    :root-style="rootStyle"
+    :visible="innerVisible"
+    @update:visible="onVisible"
+    :title="title ?? placeholder"
+    @confirm="onConfirm"
+  >
+    <template #visible="{ already }">
+      <scroll-view v-if="already" scroll-y :class="bem.e('scroll')">
+        <sar-checkbox-group
+          :size="size"
+          :type="type"
+          :checkedColor="checkedColor"
+          :direction="direction"
+          :validate-event="false"
+          :model-value="popoutValue"
+          @update:model-value="onChange"
+        >
+          <template #custom="{ toggle }">
+            <sar-list inlaid>
+              <sar-list-item
+                v-for="option in options"
+                :key="option[fieldKeys.value]"
+                :title="option[fieldKeys.label]"
+                hover
+                @click="toggle(option[fieldKeys.value])"
+              >
+                <template #value>
+                  <sar-checkbox
+                    readonly
+                    :value="option[fieldKeys.value]"
+                    :validate-event="false"
+                  />
+                </template>
+              </sar-list-item>
+            </sar-list>
+          </template>
+        </sar-checkbox-group>
+      </scroll-view>
+    </template>
+  </sar-popout>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { ref, watch, computed } from "vue";
+import SarPopoutInput from "../popout-input/popout-input.vue";
+import SarPopout from "../popout/popout.vue";
+import SarCheckboxGroup from "../checkbox-group/checkbox-group.vue";
+import SarCheckbox from "../checkbox/checkbox.vue";
+import {
+  defaultOptionKeys
+} from "../checkbox/common";
+import {
+  checkboxInputPropsDefaults
+} from "./common";
+import { createBem, isNullish } from "../../utils";
+import { useFormItemContext } from "../form/common";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "checkbox-input",
+  props:  _mergeDefaults({
+    visible: { type: Boolean, required: false },
+    title: { type: String, required: false },
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    modelValue: { type: Array, required: false },
+    disabled: { type: Boolean, required: false },
+    readonly: { type: Boolean, required: false },
+    size: { type: String, required: false },
+    type: { type: String, required: false },
+    checkedColor: { type: String, required: false },
+    direction: { type: String, required: false },
+    validateEvent: { type: Boolean, required: false },
+    options: { type: Array, required: false },
+    optionKeys: { type: Object, required: false },
+    placeholder: { type: String, required: false },
+    clearable: { type: Boolean, required: false },
+    loading: { type: Boolean, required: false },
+    multiline: { type: Boolean, required: false }
+  }, checkboxInputPropsDefaults),
+  emits: ["update:visible", "update:model-value"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("checkbox-input");
+    const formItemContext = useFormItemContext();
+    const fieldKeys = computed(() => {
+      return Object.assign({}, defaultOptionKeys, props.optionKeys);
+    });
+    const innerValue = ref(props.modelValue);
+    watch(
+      () => props.modelValue,
+      () => {
+        innerValue.value = props.modelValue;
+        if (props.validateEvent) {
+          formItemContext?.onChange();
+        }
+      }
+    );
+    const popoutValue = ref(props.modelValue);
+    watch(innerValue, () => {
+      popoutValue.value = innerValue.value;
+    });
+    const onChange = (value) => {
+      popoutValue.value = value;
+    };
+    const onConfirm = () => {
+      innerValue.value = popoutValue.value;
+      emit("update:model-value", popoutValue.value);
+      inputValue.value = getInputValue();
+    };
+    const inputValue = ref("");
+    function getOutletText(options, optionKeys, value) {
+      return options.filter((option) => value.includes(option[optionKeys.value])).map((option) => option[optionKeys.label]).join(", ");
+    }
+    function getInputValue() {
+      if (isNullish(innerValue.value) || innerValue.value.length === 0) {
+        return "";
+      }
+      return getOutletText(props.options, fieldKeys.value, innerValue.value);
+    }
+    watch(
+      innerValue,
+      () => {
+        inputValue.value = getInputValue();
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(
+      () => props.options,
+      () => {
+        inputValue.value = getInputValue();
+      }
+    );
+    const onClear = () => {
+      inputValue.value = "";
+      innerValue.value = void 0;
+      emit("update:model-value", void 0);
+    };
+    const innerVisible = ref(props.visible);
+    watch(
+      () => props.visible,
+      () => {
+        innerVisible.value = props.visible;
+      }
+    );
+    const onVisible = (visible) => {
+      innerVisible.value = visible;
+      emit("update:visible", visible);
+    };
+    const onInputClick = () => {
+      innerVisible.value = true;
+      emit("update:visible", true);
+    };
+    const __returned__ = { props, emit, bem, formItemContext, fieldKeys, innerValue, popoutValue, onChange, onConfirm, inputValue, getOutletText, getInputValue, onClear, innerVisible, onVisible, onInputClick, SarPopoutInput, SarPopout, SarCheckboxGroup, SarCheckbox };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>