@vcita/design-system 1.22.7 → 1.22.9-beta.0

package/init/DesignSystem.js

@@ -5,6 +5,7 @@ import vuetifyConfig from './vuetify.config';
 import { reducer } from './vuetify.config';
 import ClickOutside from 'vue-click-outside';
 import highlightFilter from '../src/filters/highlightFilter';
+import VueDeprecate from 'vue-deprecate';
 import '../src/scss/global.scss';
 
 import {
@@ -131,6 +132,9 @@ Vue.use(Vuetify, {
   },
 });
 
+// Register vue-deprecate plugin
+Vue.use(VueDeprecate);
+
 // Register common directives
 Vue.directive('ds-click-outside', ClickOutside);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "1.22.7",
+  "version": "1.22.9-beta.0",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {
@@ -41,6 +41,7 @@
     "lodash.throttle": "^4.1.1",
     "vue": "^2.6.14",
     "vue-click-outside": "^1.1.0",
+    "vue-deprecate": "^0.3.2",
     "vue-infinite-loading": "^2.4.5",
     "vue-pdf-embed": "1.2.1",
     "vue-virtual-scroller": "^1.1.2",

package/src/components/list/VcBaseListItem/VcBaseListItem.vue

@@ -56,6 +56,8 @@ export default {
 
 <style lang="scss" scoped>
 .vc-base-list-item {
+  font-size: var(--font-size-x-small);
+  font-weight: var(--font-weight-medium2);
   padding: var(--size-value4);
   cursor: pointer;
   transition: background 0.8s;

package/src/components/list/VcListEntity/VcListEntity.stories.js

@@ -1,5 +1,6 @@
 import VcListEntityCmp from './VcListEntity.vue';
 import VcBaseDocs from '@/stories/VcBaseDocs.mdx';
+import { getComponentStatus } from '../../../../utils/componentStatus';
 
 const baseProps = {
   disabled: false,
@@ -79,7 +80,7 @@ export default {
       url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=4133%3A39303',
     },
     status: {
-      type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+      type: getComponentStatus(VcListEntityCmp, 'stable'),
       url: 'http://www.url.com/status', // will make the tag a link
     },
     docs: {

package/src/components/list/VcListEntity/VcListEntity.vue

@@ -25,6 +25,10 @@
 import VcSwitch from '../../VcSwitch/VcSwitch.vue';
 export default {
   name: 'VcListEntity',
+  deprecated: {
+    since: '1.22.7',
+    message: 'VcListEntity is deprecated. Please consider using an alternative component.',
+  },
   components: { VcSwitch },
   props: {
     disabled: {

package/src/components/listPage/VcListItem/VcListItem.stories.js

@@ -1,5 +1,6 @@
 import VcListItemCmp from './VcListItem';
 import VcBaseDocs from '@/stories/VcBaseDocs.mdx';
+import { getComponentStatus } from '../../../../utils/componentStatus';
 
 const Template = (args, { argTypes }) => ({
   components: { VcListItem: VcListItemCmp },
@@ -61,7 +62,7 @@ export default {
       url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=4133%3A41278',
     },
     status: {
-      type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+      type: getComponentStatus(VcListItemCmp, 'beta'),
       url: 'http://www.url.com/status', // will make the tag a link
     },
     docs: {

package/src/components/listPage/VcListItem/VcListItem.vue

@@ -24,6 +24,10 @@ import VcLayout from '../../VcLayout/VcLayout.vue';
 
 export default {
   name: 'VcListItem',
+  deprecated: {
+    since: '1.22.7',
+    message: 'VcListItem is deprecated. Please consider using an alternative component.',
+  },
   components: { VcLayout, VcCheckbox, VcActions },
   props: {
     showSelect: {

package/utils/componentStatus.js

@@ -0,0 +1,9 @@
+/**
+ * Utility function to determine component status for Storybook
+ * @param {Object} component - The Vue component object
+ * @param {string} defaultStatus - The default status if not deprecated ('beta' | 'stable' | 'releaseCandidate')
+ * @returns {string} - The appropriate status type ('deprecated' | defaultStatus)
+ */
+export function getComponentStatus(component, defaultStatus = 'beta') {
+  return component?.deprecated ? 'deprecated' : defaultStatus;
+}

package/config/storybook/main.js

@@ -1,4 +0,0 @@
-module.exports = {
-  stories: ['../../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-links']
-}

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

@@ -1,2 +0,0 @@
-export { b3 as default } from '../entry-9936ba7e.js';
-import 'vuetify/lib';

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

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

package/dist/VcHeaderDropdown-01a1829f.js

@@ -1,167 +0,0 @@
-'use strict';require('vuetify/lib');var entry=require('./entry-9179c3f6.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.a$({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, entry.b0, undefined);exports["default"]=__vue_component__;

package/dist/VcHeaderDropdown-e8f0fb6e.js

@@ -1,178 +0,0 @@
-import 'vuetify/lib';
-import { V as VcLayout, al as VcGroupedItems, ak as VcDropdown, F as VcIcon, a$ as normalizeComponent, b0 as createInjector } from './entry-9936ba7e.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 };