@dialpad/dialtone-vue 2.80.0 → 2.81.0-beta.2

package/dist/style.css

@@ -0,0 +1 @@
+.d-avatar--image-loaded{background-color:transparent;background-image:unset}.dt-default-list-item,.dt-default-list-item--left,.dt-default-list-item--right{min-height:28px}.dt-list-item:not(.dt-list-item--static){cursor:pointer;border-radius:var(--size-300)}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:var(--bgc-moderate-opaque)}.dt-list-item--highlighted:active{background-color:var(--bgc-bold-opaque)}.dt-list-item:focus-visible{outline:none;box-shadow:var(--bs-focus-ring)}.dt-empty-list-item{display:flex;align-items:center;justify-content:center;font-size:var(--fs-200);line-height:var(--lh4);padding:var(--space-300) calc(var(--space-300) * 3)}.enter-active,.leave-active{overflow:hidden;transition:height var(--td300) var(--ttf-quint)}.tippy-box[data-popper-reference-hidden] .d-popover__dialog,.tippy-box[data-popper-escaped] .d-popover__dialog{visibility:hidden;pointer-events:none}.d-context-menu-list{width:calc(var(--size-300) * 48)}.dt-list-item[role=menuitem]{border-radius:var(--size-300)}.dt-list-separator{border-top:var(--size-100) solid var(--bc-default);list-style:none}.dt-list-section[tabindex="-1"]:focus{outline:none}.tippy-box[data-popper-reference-hidden] .d-tooltip,.tippy-box[data-popper-escaped] .d-tooltip{visibility:hidden;pointer-events:none}.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){line-height:var(--lh-300)}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset;opacity:.5}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--active .base-button__icon,.dt-recipe-callbar-button--active:hover .base-button__icon{color:var(--primary-color)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle{margin-top:calc(calc(var(--space-300) * 3) * -1);margin-left:calc(var(--space-300) * -5);width:var(--size-500);height:var(--size-500);padding:var(--space-400);border-radius:var(--size-300)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle.d-btn--active{background:var(--bgc-moderate-opaque)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header{background:var(--bgc-contrast);color:var(--fc-primary-inverted)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header button{color:var(--fc-primary-inverted)}.dt-recipe--callbar-button-with-popover--button .d-tab--selected:after,.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover:after{--tab--bgc: var(--bgc-contrast)}.dt-recipe--callbar-button-with-popover--button .tab-group{display:flex;flex-direction:column;height:100%}.dt-recipe--callbar-button-with-popover--button .tab-content{flex:1 1 100%;overflow-y:auto}.d-top-banner-info__left{margin:var(--space-300) 0 var(--space-300) var(--space-500);min-width:20%}.d-top-banner-info__middle{display:flex;align-items:center;gap:var(--size-300)}.d-top-banner-info__right{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--size-300);margin:var(--space-300) var(--space-500) var(--space-300) 0;min-width:20%}.ivr_node__width{width:280px}.ivr_node__goto_icon{transform:rotate(90deg)}.ivr-connector{z-index:var(--zi-base1);display:flex;justify-content:center;align-items:center;border-color:var(--purple-600);background-color:var(--purple-600)}.dt-leftbar-row{--leftbar-row-color-foreground: var(--theme-sidebar-color);--leftbar-row-color-background: var(--theme-sidebar-row-color-background);--leftbar-row-radius: 100em;--leftbar-row-opacity: 100%;--leftbar-row-alpha-color-foreground: var(--theme-sidebar-icon-color);--leftbar-row-alpha-width: calc(var(--size-300) * 10);--leftbar-row-alpha-height: calc(var(--size-300) * 9);--leftbar-row-omega-min-width: 0;--leftbar-row-omega-height: var(--leftbar-row-alpha-height);--leftbar-row-omega-visibility: visible;--leftbar-row-description-font-weight: var(--fw-normal);--leftbar-row-description-font-size: var(--fs-200);--leftbar-row-description-line-height: var(--lh-200);--leftbar-row-status-color-foreground: var(--theme-sidebar-status-color);--leftbar-row-status-font-size: var(--fs-100);--leftbar-row-status-line-height: var(--lh-100);--leftbar-row-action-position-right: var(--size-400);--leftbar-row-action-position-bottom: 50%;--leftbar-row-action-width: calc(var(--size-300) * 6);--leftbar-row-action-height: var(--leftbar-row-action-width);position:relative;opacity:var(--leftbar-row-opacity)}.dt-leftbar-row:not(.dt-leftbar-row--no-action):hover{--leftbar-row-omega-min-width: var(--leftbar-row-alpha-width)}.dt-leftbar-row:hover .d-presence{--presence-color-border-base: var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row:hover .d-avatar__count{--avatar-count-color-shadow: var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row--has-unread{--leftbar-row-description-font-weight: var(--fw-bold);--leftbar-row-alpha-color-foreground: var(--leftbar-row-color-foreground)}.dt-leftbar-row--has-unread:not(.dt-leftbar-row--no-action):hover{--leftbar-row-omega-visibility: hidden}.dt-leftbar-row--muted{--leftbar-row-opacity: 50%}.dt-leftbar-row--selected{--leftbar-row-color-background: var(--theme-sidebar-selected-row-color-background);--leftbar-row-color-foreground: var(--theme-sidebar-selected-row-color)}.dt-leftbar-row--selected .d-avatar__count{--avatar-count-color-shadow: var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row--action-focused{--leftbar-row-omega-visibility: hidden;--leftbar-row-omega-min-width: var(--leftbar-row-alpha-width)}.dt-leftbar-row__is-typing{--is-typing-size-shape: calc(var(--size-300) * 6);height:var(--is-typing-size-shape);width:var(--is-typing-size-shape);position:absolute;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:var(--br-pill);opacity:.75}.dt-leftbar-row__is-typing span{transition:all .5s ease;background:var(--bgc-strong);height:4px;width:4px;display:inline-block;padding:0;opacity:.3;border-radius:var(--br-pill);animation:wave 1.5s ease infinite}.dt-leftbar-row__is-typing span:nth-child(1){animation-delay:0ms}.dt-leftbar-row__is-typing span:nth-child(2){animation-delay:var(--td100)}.dt-leftbar-row__is-typing span:nth-child(3){animation-delay:var(--td200)}.dt-leftbar-row__primary{display:flex;align-items:center;flex:1;width:100%;text-align:left;color:var(--leftbar-row-color-foreground);text-decoration:none;background-color:var(--leftbar-row-color-background);border-radius:var(--leftbar-row-radius);transition-duration:var(--td200);transition-property:background-color,border,box-shadow;transition-timing-function:var(--ttf-out-quint);appearance:none;font-size:inhert;line-height:inherit;margin:0;border:0;padding:0;cursor:pointer}.dt-leftbar-row__primary:hover{--leftbar-row-color-background: var(--theme-sidebar-row-color-background-hover)}.dt-leftbar-row__primary:active{--leftbar-row-color-background: var(--theme-sidebar-row-color-background-active)}.dt-leftbar-row__primary:focus-visible{box-shadow:var(--bs-focus-ring-inset)}.dt-leftbar-row__action{position:absolute;right:var(--leftbar-row-action-position-right);top:var(--leftbar-row-action-position-bottom);transform:translateY(calc(var(--leftbar-row-action-position-bottom) * -1))}.dt-leftbar-row__action-button{opacity:0;width:var(--leftbar-row-action-width);height:var(--leftbar-row-action-height)}.dt-leftbar-row:hover .dt-leftbar-row__action-button,.dt-leftbar-row__action-button:focus-visible{opacity:1}.dt-leftbar-row__alpha{color:var(--leftbar-row-alpha-color-foreground);display:flex;box-sizing:border-box;justify-content:center;align-items:center;padding-left:var(--space-400);padding-right:var(--space-400);width:var(--leftbar-row-alpha-width);height:var(--leftbar-row-alpha-height)}.dt-leftbar-row__label{flex:1;min-width:0}.dt-leftbar-row__omega{display:flex;gap:var(--space-300);justify-content:end;align-items:center;box-sizing:border-box;min-width:var(--leftbar-row-omega-min-width);height:var(--leftbar-row-omega-height);padding-left:var(--space-400);padding-right:var(--space-400);visibility:var(--leftbar-row-omega-visibility)}.dt-leftbar-row__active-voice{color:var(--fc-success);-webkit-animation-name:opacity-pulsate;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}.dt-leftbar-row__dnd{padding-top:var(--space-200);padding-right:var(--space-300);color:var(--fc-tertiary);font-size:var(--fs-100);line-height:var(--lh-400);font-weight:var(--fw-medium)}.dt-leftbar-row__description{display:block;font-weight:var(--leftbar-row-description-font-weight);font-size:var(--leftbar-row-description-font-size);line-height:var(--leftbar-row-description-line-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-leftbar-row__status{display:block;color:var(--leftbar-row-status-color-foreground);font-size:var(--leftbar-row-status-font-size);line-height:var(--leftbar-row-status-line-height);padding-bottom:var(--space-100);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-leftbar-row__meta-context~.dt-leftbar-row__meta-custom:not(:empty):before{content:" • ";color:var(--theme-sidebar-status-color)}.dt-leftbar-row__icon-cc{border-radius:var(--size-200);width:calc(var(--size-300) * 3.5);height:calc(var(--size-300) * 3.5)}.opacity-pulsate{-webkit-animation-name:opacity-pulsate;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}@-webkit-keyframes opacity-pulsate{0%,to{opacity:.2}50%{opacity:1}}@-moz-keyframes opacity-pulsate{0%,to{opacity:.2}50%{opacity:1}}@keyframes opacity-pulsate{0%,to{opacity:.2}50%{opacity:1}}@keyframes wave{0%,50%,to{transform:translate(0)}10%{transform:translateY(-5px);opacity:90%}}.dt-leftbar-unread-pill{display:flex;align-items:center;justify-content:center;padding:var(--space-200) var(--space-500) var(--space-200) var(--space-400);gap:var(--space-300);font-size:var(--fs-100);box-shadow:var(--bs-md);border-radius:var(--br-pill);border:none;line-height:var(--lh-600);cursor:pointer}.dt-leftbar-unread-pill--mentions{font-weight:var(--fw-bold);background-color:var(--theme-mention-color-background);color:var(--theme-mention-color-foreground)}.dt-leftbar-unread-pill--messages{background-color:var(--bgc-primary);color:var(--fc-primary)}.skeleton-placeholder{display:flex;stroke:none;fill:var(--placeholder-from-color, var(--black-300));background:var(--placeholder-from-color, var(--black-300))}.skeleton-placeholder--animate{animation-name:placeholder-throb;animation-iteration-count:infinite}@keyframes placeholder-throb{10%{fill:var(--placeholder-from-color, var(--black-300));background:var(--placeholder-from-color, var(--black-300))}50%{fill:var(--placeholder-to-color, var(--black-100));background:var(--placeholder-to-color, var(--black-100))}90%{fill:var(--placeholder-from-color, var(--black-300));background:var(--placeholder-from-color, var(--black-300))}}

package/package.json

@@ -1,86 +1,34 @@
 {
   "name": "@dialpad/dialtone-vue",
-  "version": "2.80.0",
+  "version": "2.81.0-beta.2",
   "description": "Vue component library for Dialpad's design system Dialtone",
-  "keywords": [
-    "Dialpad",
-    "Dialtone",
-    "Dialtone Vue",
-    "Design System",
-    "Components",
-    "Component Library",
-    "Vue"
-  ],
-  "homepage": "https://vue.dialpad.design",
-  "bugs": {
-    "email": "dialtone@dialpad.com"
-  },
-  "license": "MIT",
-  "contributors": [
-    {
-      "name": "Brad Paugh",
-      "email": "brad.paugh@dialpad.com",
-      "url": "https://github.com/braddialpad"
-    },
-    {
-      "name": "Francis Rupert",
-      "email": "francis.rupert@dialpad.com",
-      "url": "https://github.com/francisrupert"
-    },
-    {
-      "name": "Julio Ortega",
-      "email": "julio.ortega@dialpad.com",
-      "url": "https://github.com/juliodialpad"
-    },
-    {
-      "name": "Ignacio Ropolo",
-      "email": "ignacio.ropolo@dialpad.com",
-      "url": "https://github.com/iropolo"
-    }
-  ],
-  "files": [
-    "dist/*.js",
-    "dist/component-documentation.json",
-    "CHANGELOG.md",
-    "CHANGELOG.json"
-  ],
-  "repository": "git@github.com:dialpad/dialtone-vue.git",
   "scripts": {
-    "build": "npm run clean && npm run build-main && npm run build-emoji && npm run build:documentation",
-    "build-main": "vue-cli-service build --target lib --name dialtone-vue --no-clean index.js",
-    "build-emoji": "vue-cli-service build --target lib --name emoji --no-clean emoji.js",
+    "build": "npm run clean && npm run build:main && npm run build:documentation",
+    "build:main": "vite build",
+    "lint": "run-s lint:code lint:docs",
     "build:documentation": "node scripts/build-docs.js",
     "clean": "rm -rf ./dist",
-    "pretest": "npm run clean",
-    "lint": "run-s lint:code lint:docs",
-    "build:wc": "vue-cli-service build --target wc-async --name dialtone-vue 'components/**/*[!.story]*.vue'",
-    "lint-staged:code": "eslint --fix",
+    "install:all": "npm install && npm install --prefix generator-dialtone-vue",
+    "lint-staged:code": "eslint --ext .js,.vue --ignore-path .gitignore --fix",
     "lint-staged:docs": "markdownlint --fix",
-    "lint:code": "esplint ./",
+    "lint:code": "eslint --ext .js,.vue --ignore-path .gitignore",
     "lint:docs": "markdownlint '**/*.mdx'",
     "prepublishOnly": "npm run build",
-    "release": "semantic-release --no-ci --extends ./release-local.config.js",
-    "start": "npm run storybook",
-    "storybook": "npm run --prefix storybook storybook",
-    "storybook:build": "npm run --prefix storybook build",
-    "storybook:install": "npm install --prefix storybook",
-    "test": "vue-cli-service test:unit --timeout 100000 --require source-map-support/register --colors tests/globals.js components/**/*.test.js recipes/**/**/*.test.js",
-    "test:one": "vue-cli-service test:unit --timeout 100000 --require source-map-support/register --colors tests/globals.js",
-    "test:watch": "vue-cli-service test:unit --watch --timeout 100000 --require source-map-support/register --colors tests/globals.js components/**/*.test.js recipes/**/**/*.test.js",
-    "storybook:a11y-test": "npm run --prefix storybook storybook-a11y-test",
-    "install:all": "npm install && npm install --prefix storybook && npm install --prefix generator-dialtone-vue"
-  },
-  "exports": {
-    ".": "./dist/dialtone-vue.common.js",
-    "./emoji": "./dist/emoji.common.js"
-  },
-  "gitHooks": {
-    "pre-commit": "lint-staged",
-    "commit-msg": "./scripts/commit-msg"
-  },
-  "volta": {
-    "node": "16"
+    "pretest": "npm run clean",
+    "release": "semantic-release --no-ci --extends ./release-local.config.cjs",
+    "start": "STORYBOOK_ENV=development npm run storybook",
+    "storybook": "storybook dev -p 9010",
+    "storybook:build": "storybook build && touch ./storybook-static/.nojekyll",
+    "storybook:a11y-test": "node ./.storybook/storybook-a11y-test.cjs",
+    "test": "jest",
+    "test:one": "jest -t",
+    "test:watch": "jest --watch"
   },
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "CHANGELOG.json"
+  ],
   "dependencies": {
     "@dialpad/dialtone-icons": "^0.6.1",
     "@linusborg/vue-simple-portal": "^0.1.5",
@@ -89,63 +37,139 @@
     "@tiptap/extension-text": "^2.0.2",
     "@tiptap/pm": "^2.0.2",
     "@tiptap/vue-2": "^2.0.2",
+    "@vue/vue2-jest": "^29.2.3",
     "emoji-regex": "^10.2.1",
     "emoji-toolkit": "^6.6.0",
     "seedrandom": "^3.0.5",
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
+    "@babel/core": "^7.21.4",
+    "@babel/plugin-transform-modules-commonjs": "^7.21.2",
+    "@babel/preset-env": "^7.21.4",
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
     "@dialpad/conventional-changelog-angular": "^1.1.1",
     "@dialpad/dialtone": "^7.25.1",
     "@dialpad/semantic-release-changelog-json": "^1.0.0",
-    "@percy/cli": "^1.21.0",
-    "@percy/storybook": "^4.3.5",
+    "@percy/cli": "^1.24.0",
+    "@percy/storybook": "^4.3.6",
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
-    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-plugin-unit-mocha": "~5.0.8",
-    "@vue/cli-service": "~5.0.8",
+    "@shopify/storybook-a11y-test": "^1.1.2",
+    "@storybook/addon-a11y": "^7.0.6",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/addon-styling": "^1.0.1",
+    "@storybook/blocks": "^7.0.6",
+    "@storybook/manager-api": "^7.0.6",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/theming": "^7.0.6",
+    "@storybook/vue": "^7.0.6",
+    "@storybook/vue-vite": "^7.0.6",
+    "@vitejs/plugin-vue2": "^2.2.0",
     "@vue/test-utils": "1.3",
     "axe-core": "^4.6.3",
-    "babel-eslint": "^10.1.0",
-    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^29.5.0",
     "chai": "^4.3.7",
     "eslint": "8.33",
     "eslint-config-semistandard": "^17.0.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-mocha": "^10.1.0",
+    "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-storybook": "^0.6.11",
     "eslint-plugin-vue": "^9.9.0",
     "eslint-plugin-vuejs-accessibility": "^2.1.0",
-    "esplint": "^0.10.1",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "less": "^4.1.3",
-    "less-loader": "^11.1.0",
     "lint-staged": "^13.1.0",
     "macos-release": "^3.1.0",
     "markdownlint": "^0.27.0",
     "markdownlint-cli": "^0.33.0",
     "npm-run-all": "^4.1.5",
     "null-loader": "^4.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "semantic-release": "^19.0.5",
     "sinon": "^15.0.1",
     "source-map-support": "^0.5.21",
+    "storybook": "^7.0.6",
+    "vite": "^4.2.1",
     "vue": "^2.7.14",
     "vue-cli-plugin-webpack-bundle-analyzer": "~4.0.0",
     "vue-docgen-api": "^4.56.4",
-    "vue-template-compiler": "^2.7.14",
-    "yo": "^4.3.1"
+    "vue-jest": "^3.0.7",
+    "yo": "^4.3.1",
+    "yorkie": "^2.0.0"
   },
   "peerDependencies": {
     "@dialpad/dialtone": ">=7.25",
     "vue": ">=2.6"
   },
+  "bugs": {
+    "email": "dialtone@dialpad.com"
+  },
+  "contributors": [
+    {
+      "name": "Brad Paugh",
+      "email": "brad.paugh@dialpad.com",
+      "url": "https://github.com/braddialpad"
+    },
+    {
+      "name": "Francis Rupert",
+      "email": "francis.rupert@dialpad.com",
+      "url": "https://github.com/francisrupert"
+    },
+    {
+      "name": "Julio Ortega",
+      "email": "julio.ortega@dialpad.com",
+      "url": "https://github.com/juliodialpad"
+    },
+    {
+      "name": "Ignacio Ropolo",
+      "email": "ignacio.ropolo@dialpad.com",
+      "url": "https://github.com/iropolo"
+    }
+  ],
   "engineStrict": true,
   "engines": {
     "node": ">= 16"
+  },
+  "type": "module",
+  "main": "./dist/dialtone-vue.cjs",
+  "module": "./dist/dialtone-vue.js",
+  "exports": {
+    ".": {
+      "import": "./dist/dialtone-vue.js",
+      "require": "./dist/dialtone-vue.cjs"
+    },
+    "./emoji": {
+      "import": "./dist/emoji.js",
+      "require": "./dist/emoji.cjs"
+    }
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged",
+    "commit-msg": "./scripts/commit-msg"
+  },
+  "homepage": "https://vue.dialpad.design",
+  "keywords": [
+    "Dialpad",
+    "Dialtone",
+    "Dialtone Vue",
+    "Design System",
+    "Components",
+    "Component Library",
+    "Vue"
+  ],
+  "license": "MIT",
+  "repository": "git@github.com:dialpad/dialtone-vue.git",
+  "volta": {
+    "node": "16"
   }
 }