chore: correct spelling for 'dragable' (#4600)

docs/src/en/guide/essentials/settings.md

@@ -226,7 +226,7 @@ const defaultPreferences: Preferences = {
     width: 230,
   },
   tabbar: {
-    dragable: true,
+    draggable: true,
     enable: true,
     height: 36,
     keepAlive: true,
@@ -406,7 +406,7 @@ interface ShortcutKeyPreferences {
 
 interface TabbarPreferences {
   /** Whether dragging of multiple tabs is enabled */
-  dragable: boolean;
+  draggable: boolean;
   /** Whether multiple tabs are enabled */
   enable: boolean;
   /** Tab height */

docs/src/guide/essentials/settings.md

@@ -248,7 +248,7 @@ const defaultPreferences: Preferences = {
     width: 230,
   },
   tabbar: {
-    dragable: true,
+    draggable: true,
     enable: true,
     height: 36,
     keepAlive: true,
@@ -430,7 +430,7 @@ interface ShortcutKeyPreferences {
 
 interface TabbarPreferences {
   /** 是否开启多标签页拖拽 */
-  dragable: boolean;
+  draggable: boolean;
   /** 是否开启多标签页 */
   enable: boolean;
   /** 标签页高度 */

packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap

@@ -73,7 +73,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "width": 224,
   },
   "tabbar": {
-    "dragable": true,
+    "draggable": true,
     "enable": true,
     "height": 38,
     "keepAlive": true,

packages/@core/preferences/src/config.ts

@@ -73,7 +73,7 @@ const defaultPreferences: Preferences = {
     width: 224,
   },
   tabbar: {
-    dragable: true,
+    draggable: true,
     enable: true,
     height: 38,
     keepAlive: true,

packages/@core/preferences/src/types.ts

@@ -154,7 +154,7 @@ interface ShortcutKeyPreferences {
 
 interface TabbarPreferences {
   /** 是否开启多标签页拖拽 */
-  dragable: boolean;
+  draggable: boolean;
   /** 是否开启多标签页 */
   enable: boolean;
   /** 标签页高度 */

packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue

@@ -69,7 +69,7 @@ const tabsView = computed((): TabConfig[] => {
         v-for="(tab, i) in tabsView"
         :key="tab.key"
         ref="tabRef"
-        :class="[{ 'is-active': tab.key === active, dragable: !tab.affixTab }]"
+        :class="[{ 'is-active': tab.key === active, draggable: !tab.affixTab }]"
         :data-active-tab="active"
         :data-index="i"
         class="tabs-chrome__item draggable translate-all group relative -mr-3 flex h-full select-none items-center"

packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue

@@ -75,7 +75,7 @@ const tabsView = computed((): TabConfig[] => {
         :class="[
           {
             'is-active dark:bg-accent bg-primary/15': tab.key === active,
-            dragable: !tab.affixTab,
+            draggable: !tab.affixTab,
           },
           typeWithClass.content,
         ]"

packages/@core/ui-kit/tabs-ui/src/tabs-view.vue

@@ -17,7 +17,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<Props>(), {
   contentClass: 'vben-tabs-content',
-  dragable: true,
+  draggable: true,
   styleType: 'chrome',
 });
 

packages/@core/ui-kit/tabs-ui/src/types.ts

@@ -21,7 +21,7 @@ export interface TabsProps {
   /**
    * @zh_CN 是否可以拖拽
    */
-  dragable?: boolean;
+  draggable?: boolean;
   /**
    * @zh_CN 间隙
    * @default 7

packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts

@@ -42,8 +42,8 @@ export function useTabsDrag(props: TabsProps, emit: EmitType) {
     const { initializeSortable } = useSortable(el, {
       filter: (_evt, target: HTMLElement) => {
         const parent = findParentElement(target);
-        const dragable = parent?.classList.contains('dragable');
-        return !dragable || !props.dragable;
+        const draggable = parent?.classList.contains('draggable');
+        return !draggable || !props.draggable;
       },
       onEnd(evt) {
         const { newIndex, oldIndex } = evt;
@@ -62,7 +62,7 @@ export function useTabsDrag(props: TabsProps, emit: EmitType) {
           return;
         }
 
-        if (!srcParent.classList.contains('dragable')) {
+        if (!srcParent.classList.contains('draggable')) {
           resetElState();
 
           return;
@@ -81,7 +81,7 @@ export function useTabsDrag(props: TabsProps, emit: EmitType) {
       },
       onMove(evt) {
         const parent = findParentElement(evt.related);
-        return parent?.classList.contains('dragable') && props.dragable;
+        return parent?.classList.contains('draggable') && props.draggable;
       },
       onStart: () => {
         el.style.cursor = 'grabbing';

packages/effects/layouts/src/basic/tabbar/tabbar.vue

@@ -51,7 +51,7 @@ if (!preferences.tabbar.persist) {
     :active="currentActive"
     :class="theme"
     :context-menus="createContextMenus"
-    :dragable="preferences.tabbar.dragable"
+    :draggable="preferences.tabbar.draggable"
     :show-icon="showIcon"
     :style-type="preferences.tabbar.styleType"
     :tabs="currentTabs"

packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue

@@ -17,7 +17,7 @@ defineProps<{ disabled?: boolean }>();
 const tabbarEnable = defineModel<boolean>('tabbarEnable');
 const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
 const tabbarPersist = defineModel<boolean>('tabbarPersist');
-const tabbarDragable = defineModel<boolean>('tabbarDragable');
+const tabbarDraggable = defineModel<boolean>('tabbarDraggable');
 const tabbarStyleType = defineModel<string>('tabbarStyleType');
 const tabbarShowMore = defineModel<boolean>('tabbarShowMore');
 const tabbarShowMaximize = defineModel<boolean>('tabbarShowMaximize');
@@ -50,8 +50,8 @@ const styleItems = computed((): SelectOption[] => [
   <SwitchItem v-model="tabbarPersist" :disabled="!tabbarEnable">
     {{ $t('preferences.tabbar.persist') }}
   </SwitchItem>
-  <SwitchItem v-model="tabbarDragable" :disabled="!tabbarEnable">
-    {{ $t('preferences.tabbar.dragable') }}
+  <SwitchItem v-model="tabbarDraggable" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.draggable') }}
   </SwitchItem>
   <SwitchItem v-model="tabbarShowIcon" :disabled="!tabbarEnable">
     {{ $t('preferences.tabbar.icon') }}

packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue

@@ -102,7 +102,7 @@ const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
 const tabbarShowMore = defineModel<boolean>('tabbarShowMore');
 const tabbarShowMaximize = defineModel<boolean>('tabbarShowMaximize');
 const tabbarPersist = defineModel<boolean>('tabbarPersist');
-const tabbarDragable = defineModel<boolean>('tabbarDragable');
+const tabbarDraggable = defineModel<boolean>('tabbarDraggable');
 const tabbarStyleType = defineModel<string>('tabbarStyleType');
 
 const navigationStyleType = defineModel<NavigationStyleType>(
@@ -339,7 +339,7 @@ async function handleReset() {
             </Block>
             <Block :title="$t('preferences.tabbar.title')">
               <Tabbar
-                v-model:tabbar-dragable="tabbarDragable"
+                v-model:tabbar-draggable="tabbarDraggable"
                 v-model:tabbar-enable="tabbarEnable"
                 v-model:tabbar-persist="tabbarPersist"
                 v-model:tabbar-show-icon="tabbarShowIcon"

packages/locales/src/langs/en-US.json

@@ -206,7 +206,7 @@
       "showMore": "Show More Button",
       "showMaximize": "Show Maximize Button",
       "persist": "Persist Tabs",
-      "dragable": "Enable Dragable Sort",
+      "draggable": "Enable Draggable Sort",
       "styleType": {
         "title": "Tabs Style",
         "chrome": "Chrome",

packages/locales/src/langs/zh-CN.json

@@ -206,7 +206,7 @@
       "showMore": "显示更多按钮",
       "showMaximize": "显示最大化按钮",
       "persist": "持久化标签页",
-      "dragable": "启动拖拽排序",
+      "draggable": "启动拖拽排序",
       "styleType": {
         "title": "标签页风格",
         "chrome": "谷歌",