@simsustech/quasar-components 0.6.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @simsustech/quasar-components
 
+## 0.7.1
+
+### Patch Changes
+
+- 3db27ca: fix(components): export QDrawerList
+
+## 0.7.0
+
+### Minor Changes
+
+- d5eb6bf: feat(components): add QDrawerList component
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/general.js

@@ -1,5 +1,5 @@
-import { l as loadLang, u as useLang, _ as _sfc_main$4 } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-DAnZaTMl.js";
-import { useQuasar, QCard, QCardSection, QCardActions, QDialog, QBtn, QToolbarTitle, QToolbar, QHeader, QPage, QPageContainer, QLayout, QSpace, QPageSticky, QSelect, QItemSection, QItemLabel, QItem } from "quasar";
+import { l as loadLang, u as useLang, _ as _sfc_main$5 } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-DAnZaTMl.js";
+import { useQuasar, QCard, QCardSection, QCardActions, QDialog, QBtn, QToolbarTitle, QToolbar, QHeader, QPage, QPageContainer, QLayout, QSpace, QPageSticky, QSelect, QItemSection, QItemLabel, QItem, QList } from "quasar";
 import { defineComponent, watch, ref, openBlock, createBlock, unref, withCtx, renderSlot, createVNode, createElementVNode, normalizeProps, guardReactiveProps, normalizeClass, createCommentVNode, toRefs, useAttrs, computed, mergeProps, createTextVNode, toDisplayString } from "vue";
 import { e as enUs, n as nl } from "./en-US-BEeILC7o.js";
 const _hoisted_1$1 = { class: "text-h6" };
@@ -7,7 +7,7 @@ const _hoisted_2 = { class: "text-subtitle2" };
 const __default__$2 = {
   name: "QStyledCard"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   ...__default__$2,
   props: {
     actions: {}
@@ -77,11 +77,11 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const QStyledCard = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-302df27a"]]);
+const QStyledCard = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-302df27a"]]);
 const __default__$1 = {
   name: "ResponsiveDialog"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   props: {
     display: { type: Boolean }
@@ -169,7 +169,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                         ]),
                         _: 3
                       }),
-                      !_ctx.display ? (openBlock(), createBlock(_sfc_main$4, {
+                      !_ctx.display ? (openBlock(), createBlock(_sfc_main$5, {
                         key: 0,
                         color: "accent",
                         onSubmit: submit
@@ -204,7 +204,7 @@ const _hoisted_1 = { style: { "margin-top": "80px" } };
 const __default__ = {
   name: "ResourcePage"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: {
     type: { default: "create" },
@@ -300,7 +300,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "QLanguageSelect",
   props: {
     modelValue: {},
@@ -414,12 +414,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "QDrawerList",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(QList), { class: "q-drawer-list" }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      });
+    };
+  }
+});
 export {
-  _sfc_main as QLanguageSelect,
+  _sfc_main as QDrawerList,
+  _sfc_main$1 as QLanguageSelect,
   QStyledCard,
-  _sfc_main$4 as QSubmitButton,
-  _sfc_main$1 as ResourcePage,
-  _sfc_main$2 as ResponsiveDialog,
+  _sfc_main$5 as QSubmitButton,
+  _sfc_main$2 as ResourcePage,
+  _sfc_main$3 as ResponsiveDialog,
   loadLang,
   useLang
 };

package/dist/style.css

@@ -1,4 +1,36 @@
 .card[data-v-302df27a] {
   width: 100%;
   max-width: 300px;
+}/* https://github.com/quasarframework/quasar/blob/dev/docs/src/layouts/doc-layout/DocPageMenu.sass */
+.q-drawer-list .q-item__section--avatar {
+  color: var(--q-primary);
+  min-width: 28px;
+  padding-right: 12px;
+}
+.q-drawer-list .q-expansion-item__content {
+  margin-left: 18px;
+  padding-left: 4px;
+  border-left: 1px solid rgba(0, 0, 0, 0.5);
+}
+.q-drawer-list .q-expansion-item__content .q-expansion-item__content {
+  margin-left: 26px;
+  padding-left: 2px !important;
+}
+.q-drawer-list .q-expansion-item__content .q-expansion-item__content .q-item {
+  padding-left: 16px !important;
+  margin-left: 2px;
+}
+.q-drawer-list .q-expansion-item__toggle-icon {
+  color: #bdbdbd;
+}
+.q-drawer-list .q-expansion-item--expanded > div > .q-item > .q-item__section--main {
+  color: var(--q-primary);
+}
+.q-drawer-list .q-expansion-item--expanded > div > .q-item > .q-item__section--side .q-expansion-item__toggle-icon {
+  color: var(--q-primary);
+}
+.q-drawer-list__deep-expansion > .q-expansion-item__container > .q-item .q-item__section--avatar {
+  min-width: 16px;
+  padding-left: 8px;
+  padding-right: 0;
 }

package/dist/types/ui/general/QDrawerList.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/ui/general/index.d.ts

@@ -3,4 +3,5 @@ export { default as QStyledCard } from './QStyledCard.vue';
 export { default as ResponsiveDialog } from './ResponsiveDialog.vue';
 export { default as ResourcePage } from './ResourcePage.vue';
 export { default as QLanguageSelect } from './QLanguageSelect.vue';
+export { default as QDrawerList } from './QDrawerList.vue';
 export { useLang, loadLang } from './lang/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simsustech/quasar-components",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "author": "Stefan van Herwijnen",
   "description": "High level components for Quasar Framework",
   "license": "MIT",

package/src/ui/general/QDrawerList.vue

@@ -0,0 +1,45 @@
+<template>
+  <q-list class="q-drawer-list">
+    <slot name="default" />
+  </q-list>
+</template>
+
+<script setup lang="ts">
+import { QList } from 'quasar'
+</script>
+
+<style lang="sass">
+/* https://github.com/quasarframework/quasar/blob/dev/docs/src/layouts/doc-layout/DocPageMenu.sass */
+.q-drawer-list
+  .q-item__section--avatar
+    color: var(--q-primary)
+    min-width: 28px
+    padding-right: 12px
+
+  .q-expansion-item__content
+    margin-left: 18px
+    padding-left: 4px
+    border-left: 1px solid rgba(0, 0, 0, .50)
+
+    .q-expansion-item__content
+      margin-left: 26px
+      padding-left: 2px !important
+      .q-item
+        padding-left: 16px !important
+        margin-left: 2px
+
+  .q-expansion-item__toggle-icon
+    color: #bdbdbd
+
+  .q-expansion-item--expanded > div > .q-item
+    > .q-item__section--main
+      color: var(--q-primary)
+    > .q-item__section--side .q-expansion-item__toggle-icon
+      color: var(--q-primary)
+
+  &__deep-expansion > .q-expansion-item__container > .q-item
+    .q-item__section--avatar
+      min-width: 16px
+      padding-left: 8px
+      padding-right: 0
+</style>

package/src/ui/general/index.ts

@@ -3,4 +3,5 @@ export { default as QStyledCard } from './QStyledCard.vue'
 export { default as ResponsiveDialog } from './ResponsiveDialog.vue'
 export { default as ResourcePage } from './ResourcePage.vue'
 export { default as QLanguageSelect } from './QLanguageSelect.vue'
+export { default as QDrawerList } from './QDrawerList.vue'
 export { useLang, loadLang } from './lang/index.js'