cbvirtua 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "",
   "main": "index.js",
   "scripts": {

package/v2/App.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="app">
+    <Dropdown :distance="6">
+      <button>Click me</button>
+      <template #popper>
+        <button v-close-popper="myBooleanProp" @click="hide">Close</button>
+      </template>
+    </Dropdown>
+
+  </div>
+</template>
+
+<script>
+import {
+  // Directives
+  vTooltip,
+  VClosePopper,
+  // Components
+  Dropdown,
+  Tooltip,
+  Menu
+} from './components/v2'
+console.log(VClosePopper)
+export default {
+  name: 'App',
+  data() {
+    return {
+      myBooleanProp: true
+    }
+  },
+  directives: {
+    'close-popper': VClosePopper
+  },
+  components: {
+    Dropdown
+  },
+  methods: {
+    hide() {
+      console.log(123)
+      this.myBooleanProp = true
+      console.log(this.myBooleanProp)
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

package/v2/components/Dropdown.vue

@@ -0,0 +1,28 @@
+<script lang="ts">
+import PopperWrapper from './PopperWrapper.vue'
+
+export default {
+  ...PopperWrapper,
+  name: 'VDropdown',
+  vPopperTheme: 'dropdown',
+}
+</script>
+
+<style>
+.v-popper--theme-dropdown .v-popper__inner {
+  background: #fff;
+  color: black;
+  border-radius: 6px;
+  border: 1px solid #ddd;
+  box-shadow: 0 6px 30px rgba(0, 0, 0, .1);
+}
+
+.v-popper--theme-dropdown .v-popper__arrow-inner {
+  visibility: visible;
+  border-color: #fff;
+}
+
+.v-popper--theme-dropdown .v-popper__arrow-outer {
+  border-color: #ddd;
+}
+</style>

package/v2/components/Menu.vue

@@ -0,0 +1,9 @@
+<script lang="ts">
+import PopperWrapper from './PopperWrapper.vue'
+
+export default {
+  ...PopperWrapper,
+  name: 'VMenu',
+  vPopperTheme: 'menu',
+}
+</script>

package/{floating → v2}/components/Popper.js

@@ -1,4 +1,4 @@
-import { autoPlacement, computePosition, offset, shift, flip, arrow, getScrollParents, size, } from '@floating-ui/dom';
+import { autoPlacement, computePosition, offset, shift, flip, arrow, getScrollParents, size, } from '../floating-ui/dom/';
 import { supportsPassive, isIOS } from '../util/env';
 import { placements } from '../util/popper';
 import { SHOW_EVENT_MAP, HIDE_EVENT_MAP } from '../util/events';

package/v2/components/PopperContent.vue

@@ -0,0 +1,270 @@
+<template>
+  <div
+    :id="popperId"
+    ref="popover"
+    class="v-popper__popper"
+    :class="[
+      themeClass,
+      classes.popperClass,
+      {
+        'v-popper__popper--shown': shown,
+        'v-popper__popper--hidden': !shown,
+        'v-popper__popper--show-from': classes.showFrom,
+        'v-popper__popper--show-to': classes.showTo,
+        'v-popper__popper--hide-from': classes.hideFrom,
+        'v-popper__popper--hide-to': classes.hideTo,
+        'v-popper__popper--skip-transition': skipTransition,
+        'v-popper__popper--arrow-overflow': result && result.arrow.overflow,
+        'v-popper__popper--no-positioning': !result,
+      },
+    ]"
+    :style="result ? {
+      position: result.strategy,
+      transform: `translate3d(${Math.round(result.x)}px,${Math.round(result.y)}px,0)`,
+    } : undefined"
+    :aria-hidden="shown ? 'false' : 'true'"
+    :tabindex="autoHide ? 0 : undefined"
+    :data-popper-placement="result ? result.placement : undefined"
+    @keyup.esc="autoHide && $emit('hide')"
+  >
+    <div
+      class="v-popper__backdrop"
+      @click="autoHide && $emit('hide')"
+    />
+    <div
+      class="v-popper__wrapper"
+      :style="result ? {
+        transformOrigin: result.transformOrigin,
+      } : undefined"
+    >
+      <div
+        ref="inner"
+        class="v-popper__inner"
+      >
+        <template v-if="mounted">
+          <div>
+            <slot />
+          </div>
+
+          <ResizeObserver
+            v-if="handleResize"
+            @notify="$emit('resize', $event)"
+          />
+        </template>
+      </div>
+
+      <div
+        ref="arrow"
+        class="v-popper__arrow-container"
+        :style="result ? {
+          left: toPx(result.arrow.x),
+          top: toPx(result.arrow.y),
+        } : undefined"
+      >
+        <div class="v-popper__arrow-outer" />
+        <div class="v-popper__arrow-inner" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import ResizeObserver  from './ResizeObserver.vue'
+import ThemeClass from './ThemeClass'
+
+export default {
+  name: 'VPopperContent',
+
+  components: {
+    ResizeObserver,
+  },
+
+  mixins: [
+    ThemeClass,
+  ],
+
+  props: {
+    popperId: String,
+    theme: String,
+    shown: Boolean,
+    mounted: Boolean,
+    skipTransition: Boolean,
+    autoHide: Boolean,
+    handleResize: Boolean,
+    classes: Object,
+    result: Object,
+  },
+
+  methods: {
+    toPx (value) {
+      if (value != null && !isNaN(value)) {
+        return `${value}px`
+      }
+      return null
+    },
+  },
+}
+</script>
+
+<style>
+.v-popper__popper {
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  outline: none;
+}
+
+.v-popper__popper.v-popper__popper--hidden {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity .15s, visibility .15s;
+  pointer-events: none;
+}
+
+.v-popper__popper.v-popper__popper--shown {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity .15s;
+}
+
+.v-popper__popper.v-popper__popper--skip-transition,
+.v-popper__popper.v-popper__popper--skip-transition > .v-popper__wrapper {
+  transition: none !important;
+}
+
+.v-popper__backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+
+.v-popper__inner {
+  position: relative;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.v-popper__inner > div {
+  position: relative;
+  z-index: 1;
+  max-width: inherit;
+  max-height: inherit;
+}
+
+.v-popper__arrow-container {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+}
+
+.v-popper__popper--arrow-overflow .v-popper__arrow-container,
+.v-popper__popper--no-positioning .v-popper__arrow-container {
+  display: none;
+}
+
+.v-popper__arrow-inner,
+.v-popper__arrow-outer {
+  border-style: solid;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
+
+.v-popper__arrow-inner {
+  visibility: hidden;
+  border-width: 7px;
+}
+
+.v-popper__arrow-outer {
+  border-width: 6px;
+}
+
+.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-inner,
+.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-inner {
+  left: -2px;
+}
+
+.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-outer,
+.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-outer {
+  left: -1px;
+}
+
+.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-inner,
+.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-outer {
+  border-bottom-width: 0;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+}
+
+.v-popper__popper[data-popper-placement^="top"] .v-popper__arrow-inner {
+  top: -2px;
+}
+
+.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-container {
+  top: 0;
+}
+
+.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-inner,
+.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-outer {
+  border-top-width: 0;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-top-color: transparent !important;
+}
+
+.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-inner {
+  top: -4px;
+}
+
+.v-popper__popper[data-popper-placement^="bottom"] .v-popper__arrow-outer {
+  top: -6px;
+}
+
+.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-inner,
+.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-inner {
+  top: -2px;
+}
+
+.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-outer,
+.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-outer {
+  top: -1px;
+}
+
+.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-inner,
+.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-outer {
+  border-left-width: 0;
+  border-left-color: transparent !important;
+  border-top-color: transparent !important;
+  border-bottom-color: transparent !important;
+}
+
+.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-inner {
+  left: -4px;
+}
+
+.v-popper__popper[data-popper-placement^="right"] .v-popper__arrow-outer {
+  left: -6px;
+}
+
+.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-container {
+  right: -10px;
+}
+
+.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-inner,
+.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-outer {
+  border-right-width: 0;
+  border-top-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+}
+
+.v-popper__popper[data-popper-placement^="left"] .v-popper__arrow-inner {
+  left: -2px;
+}
+</style>

package/v2/components/PopperWrapper.vue

@@ -0,0 +1,101 @@
+<template>
+  <Popper
+    ref="popper"
+    v-slot="{
+      popperId,
+      isShown,
+      shouldMountContent,
+      skipTransition,
+      autoHide,
+      show,
+      hide,
+      handleResize,
+      onResize,
+      classes,
+      result,
+    }"
+    v-bind="$attrs"
+    :theme="theme"
+    :target-nodes="getTargetNodes"
+    :reference-node="() => $refs.reference"
+    :popper-node="() => $refs.popperContent.$el"
+    v-on="$listeners"
+  >
+    <div
+      ref="reference"
+      class="v-popper"
+      :class="[
+        themeClass,
+        {
+          'v-popper--shown': isShown,
+        },
+      ]"
+    >
+      <slot
+        :shown="isShown"
+        :show="show"
+        :hide="hide"
+      />
+
+      <PopperContent
+        ref="popperContent"
+        :popper-id="popperId"
+        :theme="theme"
+        :shown="isShown"
+        :mounted="shouldMountContent"
+        :skip-transition="skipTransition"
+        :auto-hide="autoHide"
+        :handle-resize="handleResize"
+        :classes="classes"
+        :result="result"
+        @hide="hide"
+        @resize="onResize"
+      >
+        <slot
+          name="popper"
+          :shown="isShown"
+          :hide="hide"
+        />
+      </PopperContent>
+    </div>
+  </Popper>
+</template>
+
+<script lang="ts">
+import Popper from './Popper'
+import PopperContent from './PopperContent.vue'
+import PopperMethods from './PopperMethods'
+import ThemeClass from './ThemeClass'
+
+export default {
+  name: 'VPopperWrapper',
+
+  components: {
+    Popper: Popper(),
+    PopperContent,
+  },
+
+  mixins: [
+    PopperMethods,
+    ThemeClass,
+  ],
+
+  inheritAttrs: false,
+
+  props: {
+    theme: {
+      type: String,
+      default () {
+        return this.$options.vPopperTheme
+      },
+    },
+  },
+
+  methods: {
+    getTargetNodes () {
+      return Array.from(this.$refs.reference.children)
+        .filter(node => node !== this.$refs.popperContent.$el)
+    },
+  },
+}
+</script>

package/v2/components/ResizeObserver.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class="resize-observer" tabindex="-1" />
+</template>
+  
+<script>
+function getInternetExplorerVersion() {
+    const ua = window.navigator.userAgent
+
+    const msie = ua.indexOf('MSIE ')
+    if (msie > 0) {
+        // IE 10 or older => return version number
+        return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10)
+    }
+
+    const trident = ua.indexOf('Trident/')
+    if (trident > 0) {
+        // IE 11 => return version number
+        const rv = ua.indexOf('rv:')
+        return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10)
+    }
+
+    const edge = ua.indexOf('Edge/')
+    if (edge > 0) {
+        // Edge (IE 12+) => return version number
+        return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10)
+    }
+
+    // other browser
+    return -1
+}
+
+let isIE
+
+function initCompat() {
+    if (!initCompat.init) {
+        initCompat.init = true
+        isIE = getInternetExplorerVersion() !== -1
+    }
+}
+
+export default {
+    name: 'ResizeObserver',
+
+    props: {
+        emitOnMount: {
+            type: Boolean,
+            default: false,
+        },
+
+        ignoreWidth: {
+            type: Boolean,
+            default: false,
+        },
+
+        ignoreHeight: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    mounted() {
+        initCompat()
+        this.$nextTick(() => {
+            this._w = this.$el.offsetWidth
+            this._h = this.$el.offsetHeight
+            if (this.emitOnMount) {
+                this.emitSize()
+            }
+        })
+        const object = document.createElement('object')
+        this._resizeObject = object
+        object.setAttribute('aria-hidden', 'true')
+        object.setAttribute('tabindex', -1)
+        object.onload = this.addResizeHandlers
+        object.type = 'text/html'
+        if (isIE) {
+            this.$el.appendChild(object)
+        }
+        object.data = 'about:blank'
+        if (!isIE) {
+            this.$el.appendChild(object)
+        }
+    },
+
+    beforeDestroy() {
+        this.removeResizeHandlers()
+    },
+
+    methods: {
+        compareAndNotify() {
+            if ((!this.ignoreWidth && this._w !== this.$el.offsetWidth) || (!this.ignoreHeight && this._h !== this.$el.offsetHeight)) {
+                this._w = this.$el.offsetWidth
+                this._h = this.$el.offsetHeight
+                this.emitSize()
+            }
+        },
+
+        emitSize() {
+            this.$emit('notify', {
+                width: this._w,
+                height: this._h,
+            })
+        },
+
+        addResizeHandlers() {
+            this._resizeObject.contentDocument.defaultView.addEventListener('resize', this.compareAndNotify)
+            this.compareAndNotify()
+        },
+
+        removeResizeHandlers() {
+            if (this._resizeObject && this._resizeObject.onload) {
+                if (!isIE && this._resizeObject.contentDocument) {
+                    this._resizeObject.contentDocument.defaultView.removeEventListener('resize', this.compareAndNotify)
+                }
+                this.$el.removeChild(this._resizeObject)
+                this._resizeObject.onload = null
+                this._resizeObject = null
+            }
+        },
+    },
+}
+</script>
+  
+<style scoped>
+.resize-observer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    border: none;
+    background-color: transparent;
+    pointer-events: none;
+    display: block;
+    overflow: hidden;
+    opacity: 0;
+}
+
+.resize-observer>>>object {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: -1;
+}
+</style>

package/v2/components/Tooltip.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+import PopperWrapper from './PopperWrapper.vue'
+
+export default {
+  ...PopperWrapper,
+  name: 'VTooltip',
+  vPopperTheme: 'tooltip',
+}
+</script>
+
+<style>
+.v-popper--theme-tooltip .v-popper__inner {
+  background: rgba(0, 0, 0, .8);
+  color: white;
+  border-radius: 6px;
+  padding: 7px 12px 6px;
+}
+
+.v-popper--theme-tooltip .v-popper__arrow-outer {
+  border-color: rgba(0, 0, 0, .8);
+}
+</style>