@dialpad/dialtone-vue 2.57.1 → 2.58.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [2.58.0](https://github.com/dialpad/dialtone-vue/compare/v2.57.1...v2.58.0) (2023-02-17)
+
+
+### Features
+
+* **Stack:** new stack component ([#758](https://github.com/dialpad/dialtone-vue/issues/758)) ([7e8e78a](https://github.com/dialpad/dialtone-vue/commit/7e8e78ae5e884ce0d1bb79a61ee5417f04ec4086))
+
+# [2.58.0](https://github.com/dialpad/dialtone-vue/compare/v2.57.1...v2.58.0) (2023-02-17)
+
+
+### Features
+
+* **Stack:** new stack component ([#758](https://github.com/dialpad/dialtone-vue/issues/758)) ([7e8e78a](https://github.com/dialpad/dialtone-vue/commit/7e8e78ae5e884ce0d1bb79a61ee5417f04ec4086))
+
 ## [2.57.1](https://github.com/dialpad/dialtone-vue/compare/v2.57.0...v2.57.1) (2023-02-15)
 
 

package/dist/dialtone-vue.common.js

@@ -2248,6 +2248,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtSkeletonParagraph": () => (/* reexport */ skeleton_paragraph),
   "DtSkeletonShape": () => (/* reexport */ skeleton_shape),
   "DtSkeletonText": () => (/* reexport */ skeleton_text),
+  "DtStack": () => (/* reexport */ stack),
   "DtTab": () => (/* reexport */ tab),
   "DtTabGroup": () => (/* reexport */ tab_group),
   "DtTabPanel": () => (/* reexport */ tab_panel),
@@ -20623,6 +20624,179 @@ var root_layout_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/stack/stack.vue?vue&type=template&id=ec7d952a&
+var stackvue_type_template_id_ec7d952a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.as,{tag:"component",class:[
+    'd-stack',
+    _vm.defaultDirection,
+    _vm.stackResponsive,
+    _vm.stackGap ]},[_vm._t("default")],2)}
+var stackvue_type_template_id_ec7d952a_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./components/stack/stack_constants.js
+const DT_STACK_DIRECTION = {
+  default: 'column',
+  column: 'column',
+  row: 'row',
+  'row-reverse': 'row-reverse',
+  'column-reverse': 'column-reverse'
+};
+const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];
+const DT_STACK_GAP = ['0', '100', '200', '300', '400', '500', '600'];
+;// CONCATENATED MODULE: ./components/stack/utils.js
+
+
+function _isDefaultDirection(direction) {
+  return direction === DT_STACK_DIRECTION["default"];
+}
+
+function _getValidDirection(direction) {
+  if (directionPropType(direction) === 'string') {
+    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;
+  } else if (directionPropType(direction) === 'object') {
+    const {
+      default: defaultStyle
+    } = direction;
+    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;
+  } else {
+    return null;
+  }
+}
+
+function directionPropType(value) {
+  return typeof value;
+}
+function getDefaultDirectionClass(direction) {
+  return _getValidDirection(direction) ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}` : null;
+}
+function getResponsiveClasses(direction) {
+  if (directionPropType(direction) === 'object') {
+    return [...DT_STACK_RESPONSIVE_BREAKPOINTS.map(breakpoint => {
+      return direction[breakpoint] ? `d-stack--${breakpoint}--${direction[breakpoint]}` : null;
+    })];
+  } else {
+    return null;
+  }
+}
+function getGapClass(gap) {
+  return DT_STACK_GAP.includes(gap) ? `d-stack--gap-${gap}` : null;
+}
+;// CONCATENATED MODULE: ./components/stack/validators.js
+
+
+function directionValidator(direction) {
+  if (directionPropType(direction) === 'string') {
+    return Object.keys(DT_STACK_DIRECTION).includes(direction);
+  } else if (directionPropType(direction) === 'object') {
+    const {
+      default: defaultStyle
+    } = direction;
+    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);
+  } else {
+    return null;
+  }
+}
+function gapValidator(gap) {
+  return DT_STACK_GAP.includes(gap);
+}
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/stack/stack.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+/* harmony default export */ const stackvue_type_script_lang_js_ = ({
+  name: 'DtStack',
+  props: {
+    /**
+     * Set this prop to the direction to stack the items.
+     * You can override the default direction with 'default' key.
+     * All the undefined breakpoints will have 'default' value
+     */
+    direction: {
+      type: [String, Object],
+      default: 'column',
+      validator: direction => directionValidator(direction)
+    },
+
+    /**
+     * Set this prop to render stack as a specific HTML element.
+     */
+    as: {
+      type: String,
+      default: 'div'
+    },
+
+    /**
+     * Set this prop to have the space between each stack item
+     */
+    gap: {
+      type: String,
+      default: '0',
+      validator: gap => gapValidator(gap)
+    }
+  },
+
+  data() {
+    return {
+      DT_STACK_DIRECTION: DT_STACK_DIRECTION,
+      DT_STACK_GAP: DT_STACK_GAP,
+      DT_STACK_RESPONSIVE_BREAKPOINTS: DT_STACK_RESPONSIVE_BREAKPOINTS
+    };
+  },
+
+  computed: {
+    stackGap() {
+      return getGapClass(this.gap);
+    },
+
+    defaultDirection() {
+      return getDefaultDirectionClass(this.direction);
+    },
+
+    stackResponsive() {
+      return getResponsiveClasses(this.direction);
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/stack/stack.vue?vue&type=script&lang=js&
+ /* harmony default export */ const stack_stackvue_type_script_lang_js_ = (stackvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/stack/stack.vue
+
+
+
+
+
+/* normalize component */
+;
+var stack_component = normalizeComponent(
+  stack_stackvue_type_script_lang_js_,
+  stackvue_type_template_id_ec7d952a_render,
+  stackvue_type_template_id_ec7d952a_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const stack = (stack_component.exports);
+;// CONCATENATED MODULE: ./components/stack/index.js
+
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=8075a3ae&
 var combobox_with_popovervue_type_template_id_8075a3ae_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var inputProps = ref.inputProps;
@@ -23063,6 +23237,7 @@ var grouped_chip_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes

package/dist/dialtone-vue.umd.js

@@ -2258,6 +2258,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtSkeletonParagraph": () => (/* reexport */ skeleton_paragraph),
   "DtSkeletonShape": () => (/* reexport */ skeleton_shape),
   "DtSkeletonText": () => (/* reexport */ skeleton_text),
+  "DtStack": () => (/* reexport */ stack),
   "DtTab": () => (/* reexport */ tab),
   "DtTabGroup": () => (/* reexport */ tab_group),
   "DtTabPanel": () => (/* reexport */ tab_panel),
@@ -20633,6 +20634,179 @@ var root_layout_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/stack/stack.vue?vue&type=template&id=ec7d952a&
+var stackvue_type_template_id_ec7d952a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.as,{tag:"component",class:[
+    'd-stack',
+    _vm.defaultDirection,
+    _vm.stackResponsive,
+    _vm.stackGap ]},[_vm._t("default")],2)}
+var stackvue_type_template_id_ec7d952a_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./components/stack/stack_constants.js
+const DT_STACK_DIRECTION = {
+  default: 'column',
+  column: 'column',
+  row: 'row',
+  'row-reverse': 'row-reverse',
+  'column-reverse': 'column-reverse'
+};
+const DT_STACK_RESPONSIVE_BREAKPOINTS = ['sm', 'md', 'lg', 'xl'];
+const DT_STACK_GAP = ['0', '100', '200', '300', '400', '500', '600'];
+;// CONCATENATED MODULE: ./components/stack/utils.js
+
+
+function _isDefaultDirection(direction) {
+  return direction === DT_STACK_DIRECTION["default"];
+}
+
+function _getValidDirection(direction) {
+  if (directionPropType(direction) === 'string') {
+    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;
+  } else if (directionPropType(direction) === 'object') {
+    const {
+      default: defaultStyle
+    } = direction;
+    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;
+  } else {
+    return null;
+  }
+}
+
+function directionPropType(value) {
+  return typeof value;
+}
+function getDefaultDirectionClass(direction) {
+  return _getValidDirection(direction) ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}` : null;
+}
+function getResponsiveClasses(direction) {
+  if (directionPropType(direction) === 'object') {
+    return [...DT_STACK_RESPONSIVE_BREAKPOINTS.map(breakpoint => {
+      return direction[breakpoint] ? `d-stack--${breakpoint}--${direction[breakpoint]}` : null;
+    })];
+  } else {
+    return null;
+  }
+}
+function getGapClass(gap) {
+  return DT_STACK_GAP.includes(gap) ? `d-stack--gap-${gap}` : null;
+}
+;// CONCATENATED MODULE: ./components/stack/validators.js
+
+
+function directionValidator(direction) {
+  if (directionPropType(direction) === 'string') {
+    return Object.keys(DT_STACK_DIRECTION).includes(direction);
+  } else if (directionPropType(direction) === 'object') {
+    const {
+      default: defaultStyle
+    } = direction;
+    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);
+  } else {
+    return null;
+  }
+}
+function gapValidator(gap) {
+  return DT_STACK_GAP.includes(gap);
+}
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/stack/stack.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+/* harmony default export */ const stackvue_type_script_lang_js_ = ({
+  name: 'DtStack',
+  props: {
+    /**
+     * Set this prop to the direction to stack the items.
+     * You can override the default direction with 'default' key.
+     * All the undefined breakpoints will have 'default' value
+     */
+    direction: {
+      type: [String, Object],
+      default: 'column',
+      validator: direction => directionValidator(direction)
+    },
+
+    /**
+     * Set this prop to render stack as a specific HTML element.
+     */
+    as: {
+      type: String,
+      default: 'div'
+    },
+
+    /**
+     * Set this prop to have the space between each stack item
+     */
+    gap: {
+      type: String,
+      default: '0',
+      validator: gap => gapValidator(gap)
+    }
+  },
+
+  data() {
+    return {
+      DT_STACK_DIRECTION: DT_STACK_DIRECTION,
+      DT_STACK_GAP: DT_STACK_GAP,
+      DT_STACK_RESPONSIVE_BREAKPOINTS: DT_STACK_RESPONSIVE_BREAKPOINTS
+    };
+  },
+
+  computed: {
+    stackGap() {
+      return getGapClass(this.gap);
+    },
+
+    defaultDirection() {
+      return getDefaultDirectionClass(this.direction);
+    },
+
+    stackResponsive() {
+      return getResponsiveClasses(this.direction);
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/stack/stack.vue?vue&type=script&lang=js&
+ /* harmony default export */ const stack_stackvue_type_script_lang_js_ = (stackvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/stack/stack.vue
+
+
+
+
+
+/* normalize component */
+;
+var stack_component = normalizeComponent(
+  stack_stackvue_type_script_lang_js_,
+  stackvue_type_template_id_ec7d952a_render,
+  stackvue_type_template_id_ec7d952a_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const stack = (stack_component.exports);
+;// CONCATENATED MODULE: ./components/stack/index.js
+
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=8075a3ae&
 var combobox_with_popovervue_type_template_id_8075a3ae_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var inputProps = ref.inputProps;
@@ -23073,6 +23247,7 @@ var grouped_chip_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes