@vue-ui-kit/ant 2.0.8 → 2.0.9

package/src/packages/components/CollapseCard.vue

@@ -1,39 +1,35 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+  import { ref } from 'vue';
 
-interface Props {
-  /** 是否默认折叠 */
-  defaultCollapsed?: boolean
-  title?: string
-  /** 是否可以折叠 */
-  collapsible?: boolean
-}
+  interface Props {
+    /** 是否默认折叠 */
+    defaultCollapsed?: boolean;
+    title?: string;
+    /** 是否可以折叠 */
+    collapsible?: boolean;
+  }
 
-const props = withDefaults(defineProps<Props>(), {
-  title: undefined,
-  defaultCollapsed: false,
-  collapsible: false,
-})
-const slots = defineSlots<{
-  title: () => any
-}>()
-const activeKey = ref(props.defaultCollapsed ? [] : ['content'])
-defineExpose({
-  collapse: () => {
-    activeKey.value = []
-  },
-  expand: () => {
-    activeKey.value = ['content']
-  },
-})
+  const props = withDefaults(defineProps<Props>(), {
+    title: undefined,
+    defaultCollapsed: false,
+    collapsible: false,
+  });
+  const slots = defineSlots<{
+    title: () => any;
+  }>();
+  const activeKey = ref(props.defaultCollapsed ? [] : ['content']);
+  defineExpose({
+    collapse: () => {
+      activeKey.value = [];
+    },
+    expand: () => {
+      activeKey.value = ['content'];
+    },
+  });
 </script>
 
 <template>
-  <a-collapse
-    v-if="collapsible"
-    v-model:active-key="activeKey"
-    class="collapsible-card"
-  >
+  <a-collapse v-if="collapsible" v-model:active-key="activeKey" class="collapsible-card">
     <a-collapse-panel key="content" force-render :header="title">
       <template v-if="slots.title" #header>
         <slot name="title" />
@@ -47,28 +43,4 @@ defineExpose({
     </template>
     <slot />
   </a-card>
-</template>
-
-<style scoped lang="scss">
-//样式改成card样式
-.collapsible-card {
-  background-color: #fff;
-  border-color: #f0f0f0;
-  :deep(.ant-collapse-header) {
-    padding: 0 12px;
-    min-height: 38px;
-    display: flex;
-    align-items: center;
-    font-weight: 600;
-  }
-  :deep(.ant-collapse-content) {
-    border-color: #f0f0f0;
-    .ant-collapse-content-box {
-      padding: var(--collapsible-card-body-padding, 12px);
-    }
-  }
-  :deep(.ant-collapse-item) {
-    border-color: #f0f0f0;
-  }
-}
-</style>
+</template>

package/src/packages/components/PFormGroup.vue

@@ -19,7 +19,7 @@
   import { valued } from '@/utils/is';
   import { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
   import { $warning } from '@/hooks/useMessage';
-import CollapseCard from './CollapseCard.vue';
+  import CollapseCard from './CollapseCard.vue';
 
   const useForm = Form.useForm;
   const tabsRef = ref<InstanceType<typeof Tabs>>();
@@ -234,7 +234,13 @@ import CollapseCard from './CollapseCard.vue';
   });
 </script>
 <template>
-  <collapse-card ref="rootRef" :title="title" size="small" :collapsible="collapsible" :default-collapsed="defaultCollapsed">
+  <collapse-card
+    ref="rootRef"
+    :title="title"
+    size="small"
+    :collapsible="collapsible"
+    :default-collapsed="defaultCollapsed"
+  >
     <a-spin v-if="loading" class="w-full" />
     <a-tabs
       v-else

package/src/packages/styles/index.scss

@@ -304,6 +304,27 @@
     justify-content: flex-start;
   }
 }
+
+.collapsible-card {
+  background-color: #fff;
+  border-color: #f0f0f0;
+  .ant-collapse-header {
+    padding: 0 12px;
+    min-height: 38px;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+  }
+  .ant-collapse-content {
+    border-color: #f0f0f0;
+    .ant-collapse-content-box {
+      padding: var(--collapsible-card-body-padding, 12px);
+    }
+  }
+  .ant-collapse-item {
+    border-color: #f0f0f0;
+  }
+}
 /* #endregion */
 
 /* #region EVirtTable */

package/src/packages/styles/variables.scss

@@ -1,3 +1,4 @@
 :root {
   --p-theme-bg: #fff;
+  --collapsible-card-body-padding: 12px;
 }