@vcita/design-system 1.26.1 → 1.27.0

package/dist/@vcita/design-system.esm.js

@@ -1,2 +1,2 @@
-export { b6 as default } from '../entry-32fbf369.js';
+export { b6 as default } from '../entry-83715c2d.js';
 import 'vuetify/lib';

package/dist/@vcita/design-system.ssr.js

@@ -1 +1 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var entry=require('../entry-37be839b.js');require('vuetify/lib');exports["default"]=entry.b6;
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var entry=require('../entry-b267d460.js');require('vuetify/lib');exports["default"]=entry.b6;

package/dist/VcHeaderDropdown-209a539c.js

@@ -0,0 +1,178 @@
+import 'vuetify/lib';
+import { V as VcLayout, al as VcGroupedItems, ak as VcDropdown, F as VcIcon, b2 as normalizeComponent, b3 as createInjector } from './entry-83715c2d.js';
+
+var script = {
+  name: 'VcHeaderDropdown',
+  components: {
+    VcLayout,
+    VcGroupedItems,
+    VcDropdown,
+    VcIcon
+  },
+  props: {
+    /**
+     * Array of grouped items for dropdown
+     * Format: [{ label, id, items: [{ id, label }] }]
+     */
+    options: {
+      type: Array,
+      required: true
+    },
+
+    /**
+     * ID of the currently selected option
+     * Used to highlight the selected item in the dropdown
+     */
+    selectedOptionId: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Size of dropdown icon
+     */
+    iconSize: {
+      type: String,
+      default: '10'
+    },
+
+    /**
+     * Color of dropdown icon
+     */
+    iconColor: {
+      type: String,
+      default: 'var(--gray-darken-4)'
+    },
+
+    /**
+     * Icon name to display
+     */
+    iconName: {
+      type: String,
+      default: '$caret_down'
+    },
+
+    /**
+     * Data-qa attribute for testing
+     */
+    dataQa: {
+      type: String,
+      default: 'VcHeaderDropdown'
+    },
+
+    /**
+     * Aria label for accessibility
+     */
+    ariaLabel: {
+      type: String,
+      default: 'Show options'
+    }
+  },
+
+  data() {
+    return {
+      isOpen: false
+    };
+  }
+
+};
+
+/* script */
+const __vue_script__ = script;
+/* template */
+
+var __vue_render__ = function () {
+  var _vm = this;
+
+  var _h = _vm.$createElement;
+
+  var _c = _vm._self._c || _h;
+
+  return _c('VcDropdown', {
+    attrs: {
+      "close-on-content-click": true
+    },
+    scopedSlots: _vm._u([{
+      key: "activator",
+      fn: function (ref) {
+        var on = ref.on;
+        var attrs = ref.attrs;
+        return [_c('VcLayout', _vm._g(_vm._b({
+          staticClass: "VcHeaderDropdown__icon-wrapper",
+          attrs: {
+            "align-center": ""
+          }
+        }, 'VcLayout', attrs, false), on), [_c('VcIcon', {
+          attrs: {
+            "data-qa": _vm.dataQa,
+            "size": _vm.iconSize,
+            "color": _vm.iconColor,
+            "role": "button",
+            "aria-expanded": _vm.isOpen,
+            "aria-label": _vm.ariaLabel,
+            "tabindex": "0"
+          }
+        }, [_vm._v("\n        " + _vm._s(_vm.iconName) + "\n      ")])], 1)];
+      }
+    }]),
+    model: {
+      value: _vm.isOpen,
+      callback: function ($$v) {
+        _vm.isOpen = $$v;
+      },
+      expression: "isOpen"
+    }
+  }, [_vm._v(" "), _c('VcGroupedItems', {
+    attrs: {
+      "item-groups": _vm.options,
+      "selected": _vm.selectedOptionId,
+      "selected-state-design": "highlighted"
+    },
+    on: {
+      "change": function ($event) {
+        return _vm.$emit('optionClicked', $event);
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "header",
+      fn: function (ref) {
+        var group = ref.group;
+        return [_c('div', {
+          staticClass: "VcHeaderDropdown__group-label"
+        }, [_vm._v(_vm._s(group.label))])];
+      }
+    }])
+  })], 1);
+};
+
+var __vue_staticRenderFns__ = [];
+/* style */
+
+const __vue_inject_styles__ = function (inject) {
+  if (!inject) return;
+  inject("data-v-41098370_0", {
+    source: ".VcHeaderDropdown__icon-wrapper[data-v-41098370]{height:var(--size-value4);width:var(--size-value4);flex-grow:0;cursor:pointer}.VcHeaderDropdown__group-label[data-v-41098370]{color:var(--gray-darken-3);font-size:var(--font-size-xs-small);font-weight:var(--font-weight-large);padding:var(--size-value4) var(--size-value4) var(--size-value2)}",
+    map: undefined,
+    media: undefined
+  });
+};
+/* scoped */
+
+
+const __vue_scope_id__ = "data-v-41098370";
+/* module identifier */
+
+const __vue_module_identifier__ = undefined;
+/* functional template */
+
+const __vue_is_functional_template__ = false;
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);
+
+export { __vue_component__ as default };

package/dist/VcHeaderDropdown-f3693edf.js

@@ -0,0 +1,167 @@
+'use strict';require('vuetify/lib');var entry=require('./entry-b267d460.js');var script = {
+  name: 'VcHeaderDropdown',
+  components: {
+    VcLayout: entry.V,
+    VcGroupedItems: entry.al,
+    VcDropdown: entry.ak,
+    VcIcon: entry.F
+  },
+  props: {
+    /**
+     * Array of grouped items for dropdown
+     * Format: [{ label, id, items: [{ id, label }] }]
+     */
+    options: {
+      type: Array,
+      required: true
+    },
+
+    /**
+     * ID of the currently selected option
+     * Used to highlight the selected item in the dropdown
+     */
+    selectedOptionId: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Size of dropdown icon
+     */
+    iconSize: {
+      type: String,
+      default: '10'
+    },
+
+    /**
+     * Color of dropdown icon
+     */
+    iconColor: {
+      type: String,
+      default: 'var(--gray-darken-4)'
+    },
+
+    /**
+     * Icon name to display
+     */
+    iconName: {
+      type: String,
+      default: '$caret_down'
+    },
+
+    /**
+     * Data-qa attribute for testing
+     */
+    dataQa: {
+      type: String,
+      default: 'VcHeaderDropdown'
+    },
+
+    /**
+     * Aria label for accessibility
+     */
+    ariaLabel: {
+      type: String,
+      default: 'Show options'
+    }
+  },
+  data: function data() {
+    return {
+      isOpen: false
+    };
+  }
+};/* script */
+var __vue_script__ = script;
+/* template */
+
+var __vue_render__ = function __vue_render__() {
+  var _vm = this;
+
+  var _h = _vm.$createElement;
+
+  var _c = _vm._self._c || _h;
+
+  return _c('VcDropdown', {
+    attrs: {
+      "close-on-content-click": true
+    },
+    scopedSlots: _vm._u([{
+      key: "activator",
+      fn: function fn(ref) {
+        var on = ref.on;
+        var attrs = ref.attrs;
+        return [_c('VcLayout', _vm._g(_vm._b({
+          staticClass: "VcHeaderDropdown__icon-wrapper",
+          attrs: {
+            "align-center": ""
+          }
+        }, 'VcLayout', attrs, false), on), [_c('VcIcon', {
+          attrs: {
+            "data-qa": _vm.dataQa,
+            "size": _vm.iconSize,
+            "color": _vm.iconColor,
+            "role": "button",
+            "aria-expanded": _vm.isOpen,
+            "aria-label": _vm.ariaLabel,
+            "tabindex": "0"
+          }
+        }, [_vm._v("\n        " + _vm._s(_vm.iconName) + "\n      ")])], 1)];
+      }
+    }]),
+    model: {
+      value: _vm.isOpen,
+      callback: function callback($$v) {
+        _vm.isOpen = $$v;
+      },
+      expression: "isOpen"
+    }
+  }, [_vm._v(" "), _c('VcGroupedItems', {
+    attrs: {
+      "item-groups": _vm.options,
+      "selected": _vm.selectedOptionId,
+      "selected-state-design": "highlighted"
+    },
+    on: {
+      "change": function change($event) {
+        return _vm.$emit('optionClicked', $event);
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "header",
+      fn: function fn(ref) {
+        var group = ref.group;
+        return [_c('div', {
+          staticClass: "VcHeaderDropdown__group-label"
+        }, [_vm._v(_vm._s(group.label))])];
+      }
+    }])
+  })], 1);
+};
+
+var __vue_staticRenderFns__ = [];
+/* style */
+
+var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
+  if (!inject) return;
+  inject("data-v-41098370_0", {
+    source: ".VcHeaderDropdown__icon-wrapper[data-v-41098370]{height:var(--size-value4);width:var(--size-value4);flex-grow:0;cursor:pointer}.VcHeaderDropdown__group-label[data-v-41098370]{color:var(--gray-darken-3);font-size:var(--font-size-xs-small);font-weight:var(--font-weight-large);padding:var(--size-value4) var(--size-value4) var(--size-value2)}",
+    map: undefined,
+    media: undefined
+  });
+};
+/* scoped */
+
+
+var __vue_scope_id__ = "data-v-41098370";
+/* module identifier */
+
+var __vue_module_identifier__ = "data-v-41098370";
+/* functional template */
+
+var __vue_is_functional_template__ = false;
+/* style inject shadow dom */
+
+var __vue_component__ = /*#__PURE__*/entry.b2({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, entry.b3, undefined);exports["default"]=__vue_component__;