misp-ui-library-test 0.0.1

package/src/packages/tabs/src/main.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="ui-tabs" :class="{
+    'ui-tabs--card': type === 'card',
+    [`ui-tabs--${tabPosition}`]: true,
+    'ui-tabs--border-card': type === 'border-card'
+  }">
+    <div class="ui-tabs__header" :class="`is-${tabPosition}`">
+      <div class="ui-tabs__nav-wrap" :class="`is-${tabPosition}`">
+        <div class="ui-tabs__nav-scroll">
+          <div class="ui-tabs__nav" :class="`is-${tabPosition}`" role="tablist">
+            <div
+              v-for="(tab, index) in panes"
+              :key="tab.paneName"
+              class="ui-tabs__item"
+              :class="{
+                'is-active': tab.paneName === currentName,
+                'is-disabled': tab.disabled,
+                'is-closable': tab.isClosable || editable
+              }"
+              :id="`tab-${tab.paneName}`"
+              :aria-controls="`pane-${tab.paneName}`"
+              role="tab"
+              :aria-selected="tab.paneName === currentName"
+              :tabindex="tab.paneName === currentName ? 0 : -1"
+              @click="handleTabClick(tab)"
+              @keydown="handleKeydown($event, tab)"
+            >
+              <slot v-if="tab.$slots.label" name="label" :pane="tab"></slot>
+              <span v-else>{{ tab.label }}</span>
+              <span
+                v-if="tab.isClosable || editable"
+                class="ui-tabs__close"
+                @click.stop="handleTabRemove(tab, $event)"
+              >
+                <i class="icon-close"></i>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span
+        v-if="editable || addable"
+        class="ui-tabs__new-tab"
+        tabindex="0"
+        @click="handleTabAdd"
+        @keydown.enter="handleTabAdd"
+      >
+        <i class="icon-plus"></i>
+      </span>
+    </div>
+    <div class="ui-tabs__content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiTabs',
+
+  componentName: 'UiTabs',
+
+  props: {
+    type: String,
+    activeName: String,
+    closable: Boolean,
+    addable: Boolean,
+    value: {},
+    editable: Boolean,
+    tabPosition: {
+      type: String,
+      default: 'top'
+    },
+    beforeLeave: Function,
+    stretch: Boolean
+  },
+
+  provide() {
+    return {
+      rootTabs: this
+    };
+  },
+
+  data() {
+    return {
+      currentName: this.value || this.activeName,
+      panes: []
+    };
+  },
+
+  watch: {
+    activeName(value) {
+      this.setCurrentName(value);
+    },
+    value(value) {
+      this.setCurrentName(value);
+    }
+  },
+
+  methods: {
+    calcPaneInstances() {
+      if (this.$slots.default) {
+        const paneSlots = this.$slots.default.filter(vnode => vnode.tag &&
+          vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'UiTabPane');
+        this.panes = paneSlots.map(({ componentInstance }) => componentInstance);
+      } else {
+        this.panes = [];
+      }
+    },
+    handleTabClick(tab) {
+      if (tab.disabled) return;
+      this.setCurrentName(tab.name || tab.index);
+      this.$emit('tab-click', tab);
+    },
+    handleTabRemove(pane, ev) {
+      if (pane.disabled) return;
+      ev.stopPropagation();
+      this.$emit('edit', pane.name, 'remove');
+      this.$emit('tab-remove', pane.name);
+    },
+    handleTabAdd() {
+      this.$emit('edit', null, 'add');
+      this.$emit('tab-add');
+    },
+    handleKeydown(event, tab) {
+      const keyCode = event.keyCode;
+      if (keyCode === 13 || keyCode === 32) {
+        this.handleTabClick(tab);
+      }
+    },
+    setCurrentName(value) {
+      const changeCurrentName = () => {
+        this.currentName = value;
+        this.$emit('input', value);
+      };
+      if (this.currentName !== value && this.beforeLeave) {
+        const before = this.beforeLeave(value, this.currentName);
+        if (before && before.then) {
+          before.then(() => {
+            changeCurrentName();
+          }, () => {
+            // ignore promise rejection
+          });
+        } else if (before !== false) {
+          changeCurrentName();
+        }
+      } else {
+        changeCurrentName();
+      }
+    }
+  },
+
+  created() {
+    if (!this.currentName) {
+      this.setCurrentName('0');
+    }
+  },
+
+  mounted() {
+    this.calcPaneInstances();
+  },
+
+  updated() {
+    this.calcPaneInstances();
+  }
+};
+</script>

package/src/packages/tabs-navigation/index.js

@@ -0,0 +1,7 @@
+import UiTabsNavigation from './src/main.vue'
+
+UiTabsNavigation.install = function(Vue) {
+  Vue.component(UiTabsNavigation.name, UiTabsNavigation)
+}
+
+export default UiTabsNavigation

package/src/packages/tabs-navigation/src/main.vue

@@ -0,0 +1,462 @@
+<template>
+  <div
+    class="ui-tabs-navigation"
+    :class="[rootClass, { 'is-segment-stretch': segmentStretch }]"
+    :style="rootCssVars"
+  >
+    <div
+      class="ui-tabs-navigation__header"
+      role="tablist"
+    >
+      <span
+        v-if="showArrows"
+        :class="['ui-tabs-navigation__arrow', 'is-prev', { 'is-disabled': !scrollableState.canPrev }]"
+        @click="navScroll('prev')"
+      >
+        <i class="ui-icon-arrow-left" />
+      </span>
+      <div ref="navClip" class="ui-tabs-navigation__nav-wrap">
+        <div
+          ref="navScroll"
+          class="ui-tabs-navigation__nav-scroll"
+          @scroll="onNavScroll"
+        >
+          <div
+            ref="nav"
+            :class="['ui-tabs-navigation__nav', `ui-tabs-navigation__nav--${type}`]"
+          >
+            <span
+              v-if="type === 'line'"
+              class="ui-tabs-navigation__active-bar"
+              :class="barSizeClass"
+              :style="barStyle"
+            />
+            <div
+              v-for="(tab, index) in normalizedTabs"
+              :key="String(tab.name)"
+              :class="['ui-tabs-navigation__item', { 'is-active': value === tab.name, 'is-disabled': tab.disabled }]"
+              :data-tab="String(tab.name)"
+              :ref="el => setTabItemRef(el, tab.name)"
+              role="tab"
+              :aria-selected="value === tab.name ? 'true' : 'false'"
+              :aria-disabled="tab.disabled ? 'true' : 'false'"
+              :style="getItemStyles(tab, value === tab.name)"
+              @click="onTabClick(tab, $event)"
+            >
+              <div class="ui-tabs-navigation__item-inner">
+                <slot
+                  v-if="hasLabelSlot(tab.name)"
+                  :name="`label-${tab.name}`"
+                  :tab="tab"
+                  :index="index"
+                  :active="value === tab.name"
+                />
+                <template v-else>
+                  <ui-icon
+                    v-if="(tab.showIcon != null ? tab.showIcon : showIcon) && tab.icon"
+                    :name="tab.icon"
+                    :size="iconSize"
+                    class="ui-tabs-navigation__item-icon"
+                  />
+                  <span class="ui-tabs-navigation__item-text">{{ tab.title }}</span>
+                </template>
+              </div>
+              <span
+                v-if="tab.canClose"
+                class="ui-tabs-navigation__item-close"
+                @click.stop="onTabClose($event, tab)"
+              >
+                <i class="ui-icon-close" />
+              </span>
+            </div>
+            <span
+              v-if="isAddableVisible"
+              class="ui-tabs-navigation__add"
+              @click="onAdd"
+            >
+              <i class="ui-icon-circle-plus-outline" />
+            </span>
+          </div>
+        </div>
+      </div>
+      <span
+        v-if="showArrows"
+        :class="['ui-tabs-navigation__arrow', 'is-next', { 'is-disabled': !scrollableState.canNext }]"
+        @click="navScroll('next')"
+      >
+        <i class="ui-icon-arrow-right" />
+      </span>
+    </div>
+
+    <div class="ui-tabs-navigation__content">
+      <div
+        v-for="tab in normalizedTabs"
+        v-show="value === tab.name"
+        :key="String(tab.name) + '-pane'"
+        :class="['ui-tabs-navigation__panel', { 'is-active': value === tab.name }]"
+        role="tabpanel"
+        :aria-hidden="value !== tab.name"
+      >
+        <slot
+          :name="`panel-${tab.name}`"
+          :tab="tab"
+          :active="value === tab.name"
+        >
+          <div class="ui-tabs-navigation__panel-default">
+            {{ tab.title }}
+          </div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UiIcon from '../../icon/src/main.vue'
+
+const TYPES = ['line', 'segment', 'border-card']
+const SIZES = ['large', 'default', 'small']
+const POSITIONS = ['top', 'right', 'bottom', 'left']
+
+export default {
+  name: 'UiTabsNavigation',
+
+  components: { UiIcon },
+
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    tabs: {
+      type: Array,
+      default: () => []
+    },
+    type: {
+      type: String,
+      default: 'line',
+      validator: v => TYPES.indexOf(v) > -1
+    },
+    size: {
+      type: String,
+      default: 'default',
+      validator: v => SIZES.indexOf(v) > -1
+    },
+    tabPosition: {
+      type: String,
+      default: 'top',
+      validator: v => POSITIONS.indexOf(v) > -1
+    },
+    scrollable: {
+      type: Boolean,
+      default: true
+    },
+    closable: {
+      type: Boolean,
+      default: false
+    },
+    addable: {
+      type: Boolean,
+      default: false
+    },
+    showIcon: {
+      type: Boolean,
+      default: false
+    },
+    beforeLeave: Function,
+    color: String,
+    activeColor: String,
+    inactiveTextColor: String,
+    /**
+     * segment 时：true 为整行等分+外框+竖向分隔（多选项卡等宽）；
+     * false 时轨道随内容收缩（x/y/z 轴等短标签组）
+     */
+    segmentStretch: {
+      type: Boolean,
+      default: false
+    },
+    /** segment：未选中文案色，写入 --tabs-seg-inactive-text */
+    segmentInactiveTextColor: String,
+    /** segment：选中时文案/图标色，未传则样式层使用主题 --white，写入 --tabs-seg-active-text */
+    segmentActiveTextColor: String,
+    /** segment：未选中背景，未传则样式层使用主题 --md-bg，写入 --tabs-seg-inactive-bg */
+    segmentInactiveBackground: String,
+    /** segment：选中时背景，默认与 activeColor 一致，写入 --tabs-seg-active-bg */
+    segmentActiveBackground: String,
+    /** segment：tab 间 1px 间隔色，未传则样式层使用主题 --base-bg，写入 --tabs-seg-gap */
+    segmentGapColor: String
+  },
+
+  data() {
+    return {
+      barStyle: {},
+      tabItemRefs: {},
+      scrollableState: { canPrev: false, canNext: false }
+    }
+  },
+
+  computed: {
+    isHorizontal() {
+      return this.tabPosition === 'top' || this.tabPosition === 'bottom'
+    },
+    showArrows() {
+      return this.type === 'line' && this.scrollable && this.isHorizontal
+    },
+    rootClass() {
+      return {
+        'is-top': this.tabPosition === 'top',
+        'is-right': this.tabPosition === 'right',
+        'is-bottom': this.tabPosition === 'bottom',
+        'is-left': this.tabPosition === 'left',
+        'is-horizontal': this.isHorizontal,
+        'is-line': this.type === 'line',
+        'is-segment': this.type === 'segment',
+        'is-border-card': this.type === 'border-card',
+        [`ui-tabs-navigation--${this.size}`]: true
+      }
+    },
+    rootCssVars() {
+      const c = this.activeColor || this.color
+      const o = {}
+      if (c) o['--tabs-nav-active'] = c
+      if (this.inactiveTextColor) o['--tabs-nav-inactive'] = this.inactiveTextColor
+      if (this.type === 'segment') {
+        if (this.segmentInactiveBackground) o['--tabs-seg-inactive-bg'] = this.segmentInactiveBackground
+        if (this.segmentActiveBackground) o['--tabs-seg-active-bg'] = this.segmentActiveBackground
+        else if (c) o['--tabs-seg-active-bg'] = c
+        if (this.segmentInactiveTextColor) o['--tabs-seg-inactive-text'] = this.segmentInactiveTextColor
+        else if (this.inactiveTextColor) o['--tabs-seg-inactive-text'] = this.inactiveTextColor
+        if (this.segmentActiveTextColor) o['--tabs-seg-active-text'] = this.segmentActiveTextColor
+        if (this.segmentGapColor) o['--tabs-seg-gap'] = this.segmentGapColor
+      }
+      return o
+    },
+    normalizedTabs() {
+      return (this.tabs || []).map((t, i) => {
+        const name = t.name
+        const title = t.title != null ? t.title : t.label != null ? t.label : `tab-${i}`
+        const canClose = this.isClosableType
+          ? (t.closable != null ? t.closable : this.closable)
+          : false
+        return { ...t, name, title, canClose }
+      })
+    },
+    isClosableType() {
+      return this.type === 'segment' || this.type === 'border-card'
+    },
+    isAddableVisible() {
+      return this.addable && this.type === 'segment'
+    },
+    iconSize() {
+      if (this.size === 'small') return 14
+      if (this.size === 'large') return 18
+      return 16
+    },
+    barSizeClass() {
+      return this.size === 'small'
+        ? 'is-bar--small'
+        : this.size === 'large'
+          ? 'is-bar--large'
+          : 'is-bar--default'
+    }
+  },
+
+  watch: {
+    value() {
+      this.$nextTick(() => {
+        this.updateBar()
+        this.updateScrollable()
+        this.scrollActiveIntoView()
+      })
+    },
+    tabs: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          this.updateBar()
+          this.updateScrollable()
+        })
+      }
+    },
+    type() {
+      this.$nextTick(() => this.updateBar())
+    },
+    tabPosition() {
+      this.$nextTick(() => this.updateBar())
+    },
+    segmentStretch() {
+      this.$nextTick(() => this.updateBar())
+    }
+  },
+
+  mounted() {
+    this.ensureValue()
+    this.$nextTick(() => {
+      this.updateBar()
+      this.updateScrollable()
+      requestAnimationFrame(() => {
+        this.updateBar()
+      })
+    })
+    window.addEventListener('resize', this._onWinResize, { passive: true })
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this._onWinResize)
+  },
+
+  methods: {
+    hasLabelSlot(name) {
+      return !!(this.$scopedSlots[`label-${name}`] || this.$slots[`label-${name}`])
+    },
+    _onWinResize() {
+      this.updateBar()
+      this.updateScrollable()
+    },
+    setTabItemRef(el, name) {
+      if (el) this.$set(this.tabItemRefs, name, el)
+      else this.$delete(this.tabItemRefs, name)
+    },
+    getTabItemEl() {
+      const v = this.value
+      if (v == null || v === '') return null
+      let el = this.tabItemRefs[v] || this.tabItemRefs[String(v)]
+      if (!el) {
+        const t = this.normalizedTabs.find(
+          x => x.name === v || String(x.name) === String(v)
+        )
+        if (t) el = this.tabItemRefs[t.name] || this.tabItemRefs[String(t.name)]
+      }
+      const nav = this.$refs.nav
+      if (!el && nav && nav.querySelector) {
+        const s = String(v).replace(/\\/g, '\\\\').replace(/"/g, '\\"')
+        el = nav.querySelector(`[data-tab="${s}"]`)
+      }
+      return el
+    },
+    getItemStyles(tab, active) {
+      const o = active ? (tab.activeStyle || {}) : (tab.inactiveStyle || {})
+      return { ...o }
+    },
+    onNavScroll() {
+      this.updateScrollable()
+    },
+    updateScrollable() {
+      const el = this.$refs.navScroll
+      if (!el) return
+      const { scrollLeft, scrollWidth, clientWidth } = el
+      this.scrollableState = {
+        canPrev: scrollLeft > 1,
+        canNext: scrollLeft < scrollWidth - clientWidth - 1
+      }
+    },
+    navScroll(dir) {
+      const el = this.$refs.navScroll
+      if (!el) return
+      const step = Math.floor(el.clientWidth * 0.6) * (dir === 'next' ? 1 : -1)
+      el.scrollBy({ left: step, behavior: 'smooth' })
+    },
+    scrollActiveIntoView() {
+      if (!this.showArrows) return
+      const el = this.$refs.navScroll
+      const item = this.getTabItemEl()
+      if (!el || !item) return
+      const w = el.clientWidth
+      const l = item.offsetLeft
+      const r = l + item.offsetWidth
+      if (l < el.scrollLeft) {
+        el.scrollLeft = l - 8
+      } else if (r > el.scrollLeft + w) {
+        el.scrollLeft = r - w + 8
+      }
+    },
+    updateBar() {
+      if (this.type !== 'line') {
+        this.barStyle = { display: 'none' }
+        return
+      }
+      const el = this.getTabItemEl()
+      const navRef = this.$refs.nav
+      if (!el || !navRef) {
+        this.barStyle = { opacity: 0 }
+        return
+      }
+      const e = 'cubic-bezier(0.4, 0, 0.2, 1)'
+      if (this.isHorizontal) {
+        this.barStyle = {
+          opacity: 1,
+          display: 'block',
+          width: `${el.offsetWidth}px`,
+          transform: `translateX(${el.offsetLeft}px)`,
+          top: 'auto',
+          left: 0,
+          transition: `transform 0.3s ${e}, width 0.3s ${e}, opacity 0.2s ease`
+        }
+      } else {
+        const isRight = this.tabPosition === 'right'
+        this.barStyle = {
+          opacity: 1,
+          display: 'block',
+          width: '2px',
+          height: `${el.offsetHeight}px`,
+          transform: `translateY(${el.offsetTop}px)`,
+          left: isRight ? 0 : 'auto',
+          right: isRight ? 'auto' : 0,
+          transition: `transform 0.3s ${e}, height 0.3s ${e}, opacity 0.2s ease`
+        }
+      }
+    },
+    ensureValue() {
+      if (this.value !== '' && this.value != null) return
+      const first = this.normalizedTabs.find(t => !t.disabled)
+      if (first) this.$emit('input', first.name)
+    },
+    async onTabClick(tab, event) {
+      if (tab.disabled) return
+      if (this.beforeLeave) {
+        const ret = this.beforeLeave(this.value, tab.name)
+        if (ret === false) return
+        if (ret && typeof ret.then === 'function') {
+          let ok
+          try {
+            ok = await ret
+          } catch (e) {
+            ok = false
+          }
+          if (!ok) return
+        }
+      }
+      const old = this.value
+      if (old !== tab.name) {
+        this.$emit('input', tab.name)
+        this.$emit('change', tab.name, old)
+        this.$emit('edit', { action: 'change', name: tab.name, oldName: old })
+      }
+      this.$emit('tab-click', { name: tab.name, title: tab.title, value: tab.value, tab, event })
+      this.$nextTick(() => {
+        this.updateBar()
+        this.scrollActiveIntoView()
+      })
+    },
+    onTabClose(e, tab) {
+      this.$emit('tab-remove', tab.name, tab, e)
+      this.$emit('edit', { action: 'remove', name: tab.name, tab })
+    },
+    onAdd() {
+      this.$emit('edit', { action: 'add' })
+    },
+    addTab() {
+      this.onAdd()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ui-tabs-navigation {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+}
+</style>

package/src/packages/tag/index.js

@@ -0,0 +1,12 @@
+/**
+ * Tag 标签组件
+ */
+
+import UiTag from './src/main.vue'
+
+// 自动安装
+UiTag.install = function(Vue) {
+  Vue.component(UiTag.name, UiTag)
+}
+
+export default UiTag