vue-stack-tabs 0.1.9 → 0.1.11

package/src/lib/components/OverlayLoading/loaders/bars.vue

@@ -1,79 +1,79 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 30 30"
-    :height="height"
-    :width="width"
-    :fill="color"
-  >
-    <rect x="0" y="13" width="4" height="5">
-      <animate
-        attributeName="height"
-        attributeType="XML"
-        values="5;21;5"
-        begin="0s"
-        dur="0.6s"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="y"
-        attributeType="XML"
-        values="13; 5; 13"
-        begin="0s"
-        dur="0.6s"
-        repeatCount="indefinite"
-      />
-    </rect>
-    <rect x="10" y="13" width="4" height="5">
-      <animate
-        attributeName="height"
-        attributeType="XML"
-        values="5;21;5"
-        begin="0.15s"
-        dur="0.6s"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="y"
-        attributeType="XML"
-        values="13; 5; 13"
-        begin="0.15s"
-        dur="0.6s"
-        repeatCount="indefinite"
-      />
-    </rect>
-    <rect x="20" y="13" width="4" height="5">
-      <animate
-        attributeName="height"
-        attributeType="XML"
-        values="5;21;5"
-        begin="0.3s"
-        dur="0.6s"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="y"
-        attributeType="XML"
-        values="13; 5; 13"
-        begin="0.3s"
-        dur="0.6s"
-        repeatCount="indefinite"
-      />
-    </rect>
-  </svg>
-</template>
-<script lang="ts" setup>
-import { defineProps, withDefaults } from 'vue'
-withDefaults(
-  defineProps<{
-    color?: string
-    height?: number
-    width?: number
-  }>(),
-  {
-    color: '#000',
-    height: 40,
-    width: 40
-  }
-)
-</script>
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 30 30"
+    :height="height"
+    :width="width"
+    :fill="color"
+  >
+    <rect x="0" y="13" width="4" height="5">
+      <animate
+        attributeName="height"
+        attributeType="XML"
+        values="5;21;5"
+        begin="0s"
+        dur="0.6s"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="y"
+        attributeType="XML"
+        values="13; 5; 13"
+        begin="0s"
+        dur="0.6s"
+        repeatCount="indefinite"
+      />
+    </rect>
+    <rect x="10" y="13" width="4" height="5">
+      <animate
+        attributeName="height"
+        attributeType="XML"
+        values="5;21;5"
+        begin="0.15s"
+        dur="0.6s"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="y"
+        attributeType="XML"
+        values="13; 5; 13"
+        begin="0.15s"
+        dur="0.6s"
+        repeatCount="indefinite"
+      />
+    </rect>
+    <rect x="20" y="13" width="4" height="5">
+      <animate
+        attributeName="height"
+        attributeType="XML"
+        values="5;21;5"
+        begin="0.3s"
+        dur="0.6s"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="y"
+        attributeType="XML"
+        values="13; 5; 13"
+        begin="0.3s"
+        dur="0.6s"
+        repeatCount="indefinite"
+      />
+    </rect>
+  </svg>
+</template>
+<script lang="ts" setup>
+import { defineProps, withDefaults } from 'vue'
+withDefaults(
+  defineProps<{
+    color?: string
+    height?: number
+    width?: number
+  }>(),
+  {
+    color: '#000',
+    height: 40,
+    width: 40
+  }
+)
+</script>

package/src/lib/components/OverlayLoading/loaders/dots.vue

@@ -1,92 +1,92 @@
-<template>
-  <svg
-    viewBox="0 0 120 30"
-    xmlns="http://www.w3.org/2000/svg"
-    :fill="color"
-    :width="width"
-    :height="height"
-  >
-    <circle cx="15" cy="15" r="15">
-      <animate
-        attributeName="r"
-        from="15"
-        to="15"
-        begin="0s"
-        dur="0.8s"
-        values="15;9;15"
-        calcMode="linear"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="fill-opacity"
-        from="1"
-        to="1"
-        begin="0s"
-        dur="0.8s"
-        values="1;.5;1"
-        calcMode="linear"
-        repeatCount="indefinite"
-      />
-    </circle>
-    <circle cx="60" cy="15" r="9" fill-opacity="0.3">
-      <animate
-        attributeName="r"
-        from="9"
-        to="9"
-        begin="0s"
-        dur="0.8s"
-        values="9;15;9"
-        calcMode="linear"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="fill-opacity"
-        from="0.5"
-        to="0.5"
-        begin="0s"
-        dur="0.8s"
-        values=".5;1;.5"
-        calcMode="linear"
-        repeatCount="indefinite"
-      />
-    </circle>
-    <circle cx="105" cy="15" r="15">
-      <animate
-        attributeName="r"
-        from="15"
-        to="15"
-        begin="0s"
-        dur="0.8s"
-        values="15;9;15"
-        calcMode="linear"
-        repeatCount="indefinite"
-      />
-      <animate
-        attributeName="fill-opacity"
-        from="1"
-        to="1"
-        begin="0s"
-        dur="0.8s"
-        values="1;.5;1"
-        calcMode="linear"
-        repeatCount="indefinite"
-      />
-    </circle>
-  </svg>
-</template>
-
-<script lang="ts" setup>
-import { defineProps, withDefaults } from 'vue'
-withDefaults(
-  defineProps<{
-    color?: string
-    height?: number
-    width?: number
-  }>(),
-  {
-    color: '#000',
-    height: 240,
-    width: 60
-  }
-)
-</script>
+<template>
+  <svg
+    viewBox="0 0 120 30"
+    xmlns="http://www.w3.org/2000/svg"
+    :fill="color"
+    :width="width"
+    :height="height"
+  >
+    <circle cx="15" cy="15" r="15">
+      <animate
+        attributeName="r"
+        from="15"
+        to="15"
+        begin="0s"
+        dur="0.8s"
+        values="15;9;15"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="fill-opacity"
+        from="1"
+        to="1"
+        begin="0s"
+        dur="0.8s"
+        values="1;.5;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="60" cy="15" r="9" fill-opacity="0.3">
+      <animate
+        attributeName="r"
+        from="9"
+        to="9"
+        begin="0s"
+        dur="0.8s"
+        values="9;15;9"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="fill-opacity"
+        from="0.5"
+        to="0.5"
+        begin="0s"
+        dur="0.8s"
+        values=".5;1;.5"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+    <circle cx="105" cy="15" r="15">
+      <animate
+        attributeName="r"
+        from="15"
+        to="15"
+        begin="0s"
+        dur="0.8s"
+        values="15;9;15"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+      <animate
+        attributeName="fill-opacity"
+        from="1"
+        to="1"
+        begin="0s"
+        dur="0.8s"
+        values="1;.5;1"
+        calcMode="linear"
+        repeatCount="indefinite"
+      />
+    </circle>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, withDefaults } from 'vue'
+withDefaults(
+  defineProps<{
+    color?: string
+    height?: number
+    width?: number
+  }>(),
+  {
+    color: '#000',
+    height: 240,
+    width: 60
+  }
+)
+</script>

package/src/lib/components/OverlayLoading/loaders/index.ts

@@ -1,9 +1,9 @@
-import Spinner from './spinner.vue'
-import Dots from './dots.vue'
-import Bars from './bars.vue'
-
-export default {
-  spinner: Spinner,
-  dots: Dots,
-  bars: Bars
-}
+import Spinner from './spinner.vue'
+import Dots from './dots.vue'
+import Bars from './bars.vue'
+
+export default {
+  spinner: Spinner,
+  dots: Dots,
+  bars: Bars
+}

package/src/lib/components/OverlayLoading/loaders/spinner.vue

@@ -1,41 +1,41 @@
-<template>
-  <svg
-    viewBox="0 0 38 38"
-    xmlns="http://www.w3.org/2000/svg"
-    :width="width"
-    :height="height"
-    :stroke="color"
-  >
-    <g fill="none" fill-rule="evenodd">
-      <g transform="translate(1 1)" stroke-width="2">
-        <circle stroke-opacity=".25" cx="18" cy="18" r="18" />
-        <path d="M36 18c0-9.94-8.06-18-18-18">
-          <animateTransform
-            attributeName="transform"
-            type="rotate"
-            from="0 18 18"
-            to="360 18 18"
-            dur="0.8s"
-            repeatCount="indefinite"
-          />
-        </path>
-      </g>
-    </g>
-  </svg>
-</template>
-
-<script lang="ts" setup>
-import { defineProps, withDefaults } from 'vue'
-withDefaults(
-  defineProps<{
-    color?: string
-    height?: number
-    width?: number
-  }>(),
-  {
-    color: '#000',
-    height: 64,
-    width: 64
-  }
-)
-</script>
+<template>
+  <svg
+    viewBox="0 0 38 38"
+    xmlns="http://www.w3.org/2000/svg"
+    :width="width"
+    :height="height"
+    :stroke="color"
+  >
+    <g fill="none" fill-rule="evenodd">
+      <g transform="translate(1 1)" stroke-width="2">
+        <circle stroke-opacity=".25" cx="18" cy="18" r="18" />
+        <path d="M36 18c0-9.94-8.06-18-18-18">
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 18 18"
+            to="360 18 18"
+            dur="0.8s"
+            repeatCount="indefinite"
+          />
+        </path>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, withDefaults } from 'vue'
+withDefaults(
+  defineProps<{
+    color?: string
+    height?: number
+    width?: number
+  }>(),
+  {
+    color: '#000',
+    height: 64,
+    width: 64
+  }
+)
+</script>

package/src/lib/components/TabHeader/TabHeaderButton.vue

@@ -1,35 +1,35 @@
-<template>
-  <div
-    class="stack-tab__header-button"
-    :class="{
-      'stack-tab__shadow-right': shadow === 'right',
-      'stack-tab__shadow-left': shadow === 'left'
-    }"
-    :disabled="disabled ? 'disabled' : null"
-    :title="title"
-  >
-    <div v-if="!('icon' in $slots)" class="stack-tab__mask-button" :class="iconClass" />
-    <div v-if="'icon' in $slots" class="stack-tab__button">
-      <slot name="icon" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    // 是否禁用
-    disabled?: boolean
-    shadow?: string | null
-    iconClass?: string
-    title?: string
-  }>(),
-  {
-    disabled: false,
-    shadow: null,
-    iconClass: ''
-  }
-)
-</script>
-
-<style scoped></style>
+<template>
+  <div
+    class="stack-tab__header-button"
+    :class="{
+      'stack-tab__shadow-right': shadow === 'right',
+      'stack-tab__shadow-left': shadow === 'left'
+    }"
+    :disabled="disabled ? 'disabled' : null"
+    :title="title"
+  >
+    <div v-if="!('icon' in $slots)" class="stack-tab__mask-button" :class="iconClass" />
+    <div v-if="'icon' in $slots" class="stack-tab__button">
+      <slot name="icon" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    // 是否禁用
+    disabled?: boolean
+    shadow?: string | null
+    iconClass?: string
+    title?: string
+  }>(),
+  {
+    disabled: false,
+    shadow: null,
+    iconClass: ''
+  }
+)
+</script>
+
+<style scoped></style>

package/src/lib/components/TabHeader/TabHeaderItem.vue

@@ -1,63 +1,63 @@
-<template>
-  <li
-    ref="curtab"
-    class="stack-tab__item"
-    :class="{
-      'is-active': item.active,
-      'is-icon': item.closable
-    }"
-    @click="activeTab"
-  >
-    <!--    <div v-if="!!icon" class="stack-tab__item-icon" :class="icon"></div>-->
-    <div class="stack-tab__item-title">
-      <div class="stack-tab__item-title-content" :title="title">
-        {{ title }}
-      </div>
-    </div>
-    <div
-      v-if="item.closable"
-      class="stack-tab__icon-close-fill stack-tab__item-button"
-      :title="t('VueStackTab.close')"
-      @click.stop="closeTab"
-    />
-  </li>
-</template>
-
-<script setup lang="ts" name="TabHeaderItem">
-import { computed, ref, watch } from 'vue'
-import type { ITabItem } from '@/lib/model/TabModel'
-import localeI18n from '@/lib/i18n'
-// 消息
-const emit = defineEmits(['close', 'active'])
-
-const { t } = localeI18n().getI18n()
-const curtab = ref<HTMLElement>()
-const props = defineProps<{
-  item: ITabItem
-}>()
-/**
- * 如果Active为true，就看看
- */
-watch(
-  () => props.item.active,
-  (val) => {
-    if (val) {
-      activeTab()
-    }
-  }
-)
-const title = computed<string>(() => {
-  return props.item.title || t('undefined')
-})
-
-const closeTab = () => {
-  emit('close', props.item)
-}
-const activeTab = () => {
-  // if (!props.active) {
-  emit('active', props.item, curtab)
-  // }
-}
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <li
+    ref="curtab"
+    class="stack-tab__item"
+    :class="{
+      'is-active': item.active,
+      'is-icon': item.closable
+    }"
+    @click="activeTab"
+  >
+    <!--    <div v-if="!!icon" class="stack-tab__item-icon" :class="icon"></div>-->
+    <div class="stack-tab__item-title">
+      <div class="stack-tab__item-title-content" :title="title">
+        {{ title }}
+      </div>
+    </div>
+    <div
+      v-if="item.closable"
+      class="stack-tab__icon-close-fill stack-tab__item-button"
+      :title="t('VueStackTab.close')"
+      @click.stop="closeTab"
+    />
+  </li>
+</template>
+
+<script setup lang="ts" name="TabHeaderItem">
+import { computed, ref, watch } from 'vue'
+import type { ITabItem } from '@/lib/model/TabModel'
+import localeI18n from '@/lib/i18n'
+// 消息
+const emit = defineEmits(['close', 'active'])
+
+const { t } = localeI18n().getI18n()
+const curtab = ref<HTMLElement>()
+const props = defineProps<{
+  item: ITabItem
+}>()
+/**
+ * 如果Active为true，就看看
+ */
+watch(
+  () => props.item.active,
+  (val) => {
+    if (val) {
+      activeTab()
+    }
+  }
+)
+const title = computed<string>(() => {
+  return props.item.title || t('undefined')
+})
+
+const closeTab = () => {
+  emit('close', props.item)
+}
+const activeTab = () => {
+  // if (!props.active) {
+  emit('active', props.item, curtab)
+  // }
+}
+</script>
+
+<style lang="scss" scoped></style>